Question

我正在尝试使用Spring MVC和JSP在网站内部显示图表。我已经成功显示了图表。但是，现在，我只想通过提供“选择下拉选项”来显示图表的类型（例如：饼图/条形图/折线图等）。想法是，一旦我在下拉菜单中选择选项。该图表将根据我的选择显示。例如，如果我选择条形图，它应该显示条形图。

但是实际上，当我第一次运行网站时（前提：默认情况下，使用“ bar”选项选择下拉菜单），它也可以显示图表。但是，当我尝试更改图表类型时，结果并没有像我选择的那样改变。它仍然显示条形图。

这是JSP代码：

<select id="typeChart" class="w3-dropdown-hover w3-khaki" onchange="changeTypeChart(this);">
    <option value="pie">Pie</option>
    <option value="column" selected="selected">Bar</option>
    <option value="line">Line</option>
</select>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

<input type="button" value="Save PNG" class="button" id="btn-download" />

这是JavaScript代码：

<script type="text/javascript">

var typeChart1;
var selectedValue;
var dataPoints = [];
window.onload = function() {

    var title_file = document.getElementById("titleFile").innerHTML;
    var blob = document.getElementById('ini').innerHTML;
    console.log("blob " +  blob);



    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        exportEnabled: true,
        title: {
            text: title_file
        },
        axisY: {
            title: "Index PA",
            includeZero: true
        },
        axisX: {
            title: "Time",
        },
        data: [{
            type: selectedValue,
            toolTipContent: "{y} stat index",
            dataPoints: dataPoints
        }]
    });

    changeTypeChart(blob, chart);



}
function getDataPointsFromCSV(csv, chart) {
    if (csv != null){
        console.log("ini di fc");
        // console.log(csv);
        var points;
        var csvLines = csv.split(/[\r?\n|\r|\n]+/);
        for (var i = 2; i < csvLines.length; i++) {
            if (csvLines[i].length > 0) {
                points = csvLines[i].split(";");
                // console.log(points[12]);
                dataPoints.push({
                    label: points[2],
                    y: parseFloat(points[12])
                });
            }
        }

        chart.render();
    }else{
        console.log("csv is not get");
    }
}
function changeTypeChart(blob, chart){
    typeChart1 = document.getElementById("typeChart");
    selectedValue = typeChart1.options[typeChart1.selectedIndex].value;

    console.log("this is type chart : "  + selectedValue);
    getDataPointsFromCSV(blob, chart);
}

我也遇到以下错误：

Uncaught TypeError: Cannot read property 'match' of undefined
    at new S (canvasjs.min.js:133)
    at q._initialize (canvasjs.min.js:171)
    at q.render (canvasjs.min.js:177)
    at getDataPointsFromCSV (act:20185)
    at changeTypeChart (act:20195)
    at window.onload (act:20163)

任何想法如何解决这个问题？

为什么图表不会根据所选内容而改变？

0 个答案: