Javascript Chart.js根据 Select 显示数据

// https://cdn.jsdelivr.net/npm/plotly.js-dist@2.x.x/plotly.min.js

const data = {
    labels: ["Bitcoin", "Ethereum", "Litecoin", "Tether"],
    values: [50, 30, 10, 10],
    name: "",
    hoverinfo: "label+percent+name",
    hole: 0.65,
    type: "pie",
    marker: {
        colors: ["orange", "purple", "darkblue", "green"],
        line: {
            color: "white",
            width: 4
        }
    }
}

const layout = {
    paper_bgcolor: "transparent",
    height: 550,
    width: 550,
    showlegend: false
}

const chartElement = document.querySelector("#chart"),
    chartLabelElement = document.querySelector(".chart-label"),
    chartValueElement = document.querySelector(".chart-value")

chartLabelElement.textContent = data.labels[0]
chartValueElement.textContent = data.values[0]

Plotly.newPlot(chartElement, [data], layout).then(() => {
    observeTooltip()
})

function observeTooltip() {
    window.MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver || window.MozMutationObserver

    const observer = new MutationObserver(mutations => {
        const tooltipElement = chartElement.querySelector(".hovertext")

        if (tooltipElement) {
            tooltipElement.remove()

            const textElements = tooltipElement.querySelectorAll("tspan")

            const label = textElements[0].textContent.trim(),
                value = textElements[1].textContent.trim()

            chartLabelElement.textContent = label
            chartValueElement.textContent = value
        }
    })

    observer.observe(chartElement, {
        childList: true,
        subtree: true
    })
}

.modebar-container {
  display: none;
}

#chart {
  width: fit-content;
  margin: 0 auto;
}

#chart path.surface:hover {
  cursor: pointer;
  filter: opacity(0.7);
}

#chart .hovertext {
  display: none;
}

.chart-block {
  position: relative;
}

.chart-center {
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  width: 100%;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  
  text-align: center;
  font-family: "Segoe UI", sans-serif;
}

.chart-label {
  color: #555;
  font-size: 18px;
  font-weight: 700;
}

.chart-value {
  color: #000;
  font-size: 48px;
  font-weight: 700;
}

<script src="https://cdn.jsdelivr.net/npm/plotly.js-dist@2.x.x/plotly.min.js"></script>
<div class="chart-block">
    <div class="chart-center">
        <div>
            <div class="chart-label"></div>
            <div class="chart-value"></div>
        </div>
    </div>
    <div id="chart"></div>
</div>