Question

我想根据下拉值更改图表类型。我尝试并遵循了该示例，但是它仍然无法工作。我不确定我错过了哪一部分。我正在使用AJAX从JSON数据中使用JavaScript图表。下面的代码：

<script src="../js/custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>

<script>
window.onload = function () {

var dataPoints = [];

$.getJSON( "<?php echo $url; ?>", function( json ) {

  for (var i = 0; i < json.dates.length; i++) {
        dataPoints.push({
            x: new Date(json.dates[i]),
            y: json.values[i]
        });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    theme: "dark2",
    title: {
        text: "REPORT"
    },
    axisY: {
        title: "Qty"
    },
    data: [{
        type: "column", 
        //indexLabel: "{y}", //Shows y value on all Data Points
        yValueFormatString: "#,### Units",
        indexLabelFontColor: "#5A5757",
        indexLabelPlacement: "outside",
        dataPoints: dataPoints
    }]
});

chart.render();
 })
    .done(function(){
        alert("Completed");
    })
    .fail(function(e){
        console.log('error:');
        console.error(e);
    })
    .always(function(){
        alert("always runs");
    });
}
var chartType = document.getElementById('chartType');
chartType.addEventListener( "change",  function(){
        for(var i = 0; i < chart.options.data.length; i++){
            chart.options.data[i].type = chartType.options[chartType.selectedIndex].value;
    }
    chart.render();
});
</script>

下拉列表：

<select id="chartType" class="form-control" name="chartType">
                                            <option value="column">Column</option>
                                            <option value="line">Line</option>
                                            <option value="bar">Bar</option>
                                            <option value="pie">Pie</option>
                                            <option value="doughnut">Doughnut</option>
                                        </select>

谢谢。

Answer 1

好像variable scope issue一样，您正在AJAX内创建图表，但在更改图表类型期间尝试在外部进行访问，这会在浏览器控制台中引发错误。我建议您在AJAX之外执行此操作，并只更新AJAX内的dataPoint。

这是更新后的代码/工作代码（只有1个dataPoint的示例JSON存储在https://api.myjson.com/bins/18hgaa中）：

var dataPoints = [];
var chart;
$.getJSON("https://api.myjson.com/bins/18hgaa", function(json){
  for (var i = 0; i < json.dates.length; i++) {
    dataPoints.push({
      x: new Date(json.dates[i]),
      y: json.values[i]
    });
  }
}).done(function(){
		chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    theme: "dark2",
    title: {
      text: "REPORT"
    },
    axisY: {
      title: "Qty"
    },
    data: [{
      type: "column", 
      //indexLabel: "{y}", //Shows y value on all Data Points
      yValueFormatString: "#,### Units",
      indexLabelFontColor: "#5A5757",
      indexLabelPlacement: "outside",
      dataPoints: dataPoints
    }]
  });
	chart.render();
});
var chartType = document.getElementById('chartType');
chartType.addEventListener( "change",  function(){
  for(var i = 0; i < chart.options.data.length; i++){
    chart.options.data[i].type = chartType.options[chartType.selectedIndex].value;
  }
  chart.render();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<select id="chartType" class="form-control" name="chartType">
  <option value="column">Column</option>
  <option value="line">Line</option>
  <option value="bar">Bar</option>
  <option value="pie">Pie</option>
  <option value="doughnut">Doughnut</option>
</select>

CanvasJS根据下拉值更改图表类型

1 个答案: