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

Question

我想根据下拉值更改图表类型。我已经尝试并遵循了这个例子，但它仍然无法工作。我不确定我错过了哪一部分。我正在使用来自 JSON 数据的 JavaScript 图表和图形，使用 AJAX。代码如下：

<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.

内的数据点

这是更新/工作代码（只有 1 个数据点的示例 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 根据下拉值更改图表类型

CanvasJS changing chart-type based on drop-down value

canvasjs