Highcharts - 使用setData（）更新列图不工作

我有一个列图，我想在用户从下拉菜单中选择一个选项时进行更新。我能够正确渲染列图，但我无法使用setData（）更新图。我有点难过，因为我没有收到任何错误。任何帮助或见解，你可以给我非常感谢！这里是一个链接到我的jsfiddleHighcharts - 使用setData（）更新列图不工作

http://jsfiddle.net/mshirk/6QYzD/2/

和JavaScript代码绘制图形

$(document).ready(function() { 
    var chartBench = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'containerYo', 
      type: 'column' 
     }, 
     title: { 
      text: '' 
     }, 
     credits: { 
      enabled: false 
     }, 
     legend: {}, 
     plotOptions: { 
      series: { 
       shadow: false, 
       borderWidth: 0 
      } 
     }, 
     xAxis: { 
      lineColor: '#999', 
      lineWidth: 1, 
      tickColor: '#666', 
      tickLength: 3, 
      categories: ['2011', '2012', '2013', '2014'], 
      title: { 
       text: 'Years' 
      } 
     }, 
     yAxis: { 
      lineColor: '#999', 
      lineWidth: 1, 
      tickColor: '#666', 
      tickWidth: 1, 
      tickLength: 3, 
      gridLineColor: '#ddd', 
      labels: { 
       format: '$ {value}' 
      }, 
      title: { 
       text: '' 
      } 
     }, 
     series: [{ 
      "name": "Yours", 
       "data": [110, 100, 120, 130] 
     }, { 
      "name": "Another", 
       "data": [100, 90, 110, 120] 
     }, { 
      "name": "Another B", 
       "data": [90, 80, 100, 110] 
     }, { 
      "name": "Another C", 
       "data": [80, 70, 90, 100] 
     }] 



    }); 
}); 


$("#list").on('change', function() { 
    //alert('f') 
    var selVal = $("#list").val(); 


    if (selVal == "a") { 
     chartBench.series[0].setData([ 
      [{ 
       "name": "Yours", 
        "data": [110, 100, 120, 130] 
      }, { 
       "name": "Another", 
        "data": [100, 90, 110, 120] 
      }, { 
       "name": "Another B", 
        "data": [90, 80, 100, 110] 
      }, { 
       "name": "Another C", 
        "data": [80, 70, 90, 100] 
      }] 
     ]); 

    } else if (selVal == "b") { 
     chartBench.series[0].setData([ 
      [{ 
      "name": "Yours", 
       "data": [210, 200, 220, 230] 
     }, { 
      "name": "Another", 
       "data": [200, 190, 210, 220] 
     }, { 
      "name": "Another B", 
       "data": [190, 180, 200, 210] 
     }, { 
      "name": "Another C", 
       "data": [180, 170, 190, 200] 
     }] 
      ]); 

     } else { 

     } 
    });

来源

2014-07-21 user3826864

“我没有收到任何错误”。检查你的控制台提示。 –

感谢您的帮助，但是在检查控制台时，我没有收到任何通知 – user3826864

如果您在下拉列表中选择了某些内容，它会在控制台中产生此错误：未捕获的ReferenceError：chartBench未定义。在list change事件中引用'chartBench'的范围是错误的。 –

第一个问题是读出由你的代码生成的错误。当您从下拉列表中选择一个选项，你的代码生成错误：

Uncaught ReferenceError: chartBench is not defined

这是因为chartBench是ready(function() { ... })范围内创建的，且不能从外面on('change', function() { ... })访问。你可能想看看Javascript Variable Scope。

为了解决这个问题，你可以在顶级定义chartBench变量，以确保它是可访问的，就像这样：

var chartBench; 
$(document).ready(function() { 
    chartBench = new Highcharts.Chart({ 
    ....

你可以或者也ready(function() { ... })范围内将您的更改侦听声明。

关于数据的更新，您的代码仍然存在问题。您正在使用chartBench.series[0].setData，就好像它可以同时更新所有数据一样。不是这种情况。此功能设置单个系列的数据，因此您必须循环访问您的系列并单独更新它们。正确使用的setData更新一列会是这个样子：

chartBench.series[0].setData([210, 200, 220, 230]);

这将更新的第一个系列在图表中使用这些特定的值，而不是那些它以前了。这个updated JSFiddle给出了一个使用下拉菜单更新单个列的例子。如果需要，您可以在所有系列中使用此功能。

来源

2014-07-21 18:52:40

谢谢！这有助于很多！ – user3826864

DEMO为所有系列（不仅是第一辑）更新数据。

代码：

var chartBench $(document).ready(function() { chartBench = new Highcharts.Chart({ chart: { renderTo: 'containerYo', type: 'column' }, title: { text: '' }, credits: { enabled: false }, legend: {}, plotOptions: { series: { shadow: false, borderWidth: 0 } }, xAxis: { lineColor: '#999', lineWidth: 1, tickColor: '#666', tickLength: 3, categories: ['2011', '2012', '2013', '2014'], title: { text: 'Years' } }, yAxis: { lineColor: '#999', lineWidth: 1, tickColor: '#666', tickWidth: 1, tickLength: 3, gridLineColor: '#ddd', labels: { format: '$ {value}' }, title: { text: '' } }, series: [{ "name": "Yours", "data": [110, 100, 120, 130] }, { "name": "Another", "data": [100, 90, 110, 120] }, { "name": "Another B", "data": [90, 80, 100, 110] }, { "name": "Another C", "data": [80, 70, 90, 100] }] }); }); var option_a_data = [{ "name": "Option-A (1)", "data": [10, 20, 30, 40] }, { "name": "Option-A (2)", "data": [50, 60, 70, 80] }, { "name": "Option-A (3)", "data": [90, 100, 110, 120] }, { "name": "Option-A (4)", "data": [130, 140, 150, 160] }]; var option_b_data = [{ "name": "Option-B (1)", "data": [110, 100, 90, 80] }, { "name": "Option-B (2)", "data": [110, 100, 90, 80] }, { "name": "Option-B (3)", "data": [110, 100, 90, 80] }, { "name": "Option-B (4)", "data": [110, 100, 90, 80] }]; $("#list").on('change', function() { //alert('f') var selVal = $("#list").val(); if (selVal == "a") { //chartBench.series[0].setData([110, 100, 120, 130]); for(i=0; i<chartBench.series.length; i++) { //alert(i); //chartBench.series[i].setData(my_data[i].data); chartBench.series[i].update({ name: option_a_data[i].name, data:option_a_data[i].data }); } chartBench.redraw(); } else if (selVal == "b") { for(i=0; i<chartBench.series.length; i++) { //alert(i); //chartBench.series[i].setData(my_data[i].data); chartBench.series[i].update({ name: option_b_data[i].name, data:option_b_data[i].data }); } chartBench.redraw(); // redraw only after add all series } else { } });

来源

2014-07-22 13:15:26

Highcharts - 使用setData（）更新列图不工作

回答

相关问题