javascript - 如何通过 chart.js 的下拉菜单更改 CSV 文件

Question

我目前有一个通过 CSV 文件显示信息的图表。我想做的是根据用户选择的下拉选项更改 CSV 文件。EG - 如果用户选择是“TestData1”，它将显示来自 test_data.csv 的数据。如果选择“TestData2”，它将显示来自 test_data2.csv 的数据，依此类推。我希望能够添加尽可能多的下拉选项和外部 csv 文件。

目前该代码可用于显示图表，但我不知道如何使其与下拉选择器一起使用。我已经尝试了从下拉列表中的 d3js 动态 csv 开关中找到的解决方案，但不幸的是它对我不起作用。

到目前为止，这是我的代码-

    <select name="csvGraphSelector" class="input">
        <option value="test_data">TestData1</option>
        <option value="test_data2">TestData2</option>
    </select>

    <canvas id="chart"></canvas>

<script>
function makeChart(cvcGraph) {

    var cvcGraphLabels = cvcGraph.map(function(d) {
        return d.Time;
    });

    var cvcGraphData = cvcGraph.map(function(d) {
        return +d.Bandwidth;
    });

    var chart = new Chart('chart', {

        type: "line",

        responsive: true,

        options: {
            maintainAspectRatio: true,
            legend: {
                display: false
            },
            elements: {
                point: {
                    radius: 2
                }
            },
            scales:{
                xAxes:[{
                    gridLines: {
                        display: false,
                        drawBorder: true
                    },
                    ticks: {
                        display: true,
                        autoSkip: true,
                        maxTicksLimit: 12
                    }
                }],
                yAxes:[{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        display: true,
                        autoSkip: true,
                        maxTicksLimit: 3,
                        suggestedMin: 0,
                        beginAtZero: true,
                        max: 100,
                        padding: 30
                    }
                }]
            }

        },
        data: {
            labels: cvcGraphLabels,
            datasets: [{
                data: cvcGraphData,
                fill: true,
                borderColor: "#333",
                borderWidth: 2,
                backgroundColor: "#fff",
                pointBackgroundColor: "#333",
                pointBorderColor: "#fff",
                pointBorderWidth: 1
            }]  
        }

    });

}

d3
    .csv("/assets/test_data.csv")
    .then(makeChart);

</script>

任何帮助将不胜感激。

谢谢。

标签： javascriptcsvchart.js