Question

我是世界JavaScript，HTML和CSS的全新手。我有一个HTML页面，其中包含使用Highcharts创建的多个图表。该页面有一个下拉菜单，其中包含印度各州的列表。选择状态后，将使用此状态的数据更新所有图表。每个图表都附有一组2个按钮（参见小提琴链接）。在切换按钮时，会加载不同的图表。

现在问题：我需要让这两个功能协同工作。也就是说，当我选择“Andhra Pradesh”时，Andhra Pradesh的数据应该加载到两个图表上。我能够使图表加载“2017-18”状态的相应数据，但不能用于“其他年份”。无法理解出了什么问题。这是一个小提琴的链接：https://jsfiddle.net/Pr4chi/w9nq1cw3/110/

这是切换图表的代码：

$(document).on('click', '.chart-update', function() {
    $('button').removeClass('selected');
        $(this).addClass('selected');
        chart.destroy();
    $('#donut').highcharts(chartOptions[$(this).data('chartName')]);
    chart = $('#donut').highcharts();
  });

非常感谢任何帮助！

Answer 1

您可以将change事件绑定到select元素，并根据选择的状态更新图表系列的数据。看看下面的例子。我添加了一些虚拟数据（检查dataForStates对象）以向您展示它是如何工作的。

API参考：
http://api.highcharts.com/highcharts/Series.update
http://api.highcharts.com/highcharts/Series.setData
https://api.jquery.com/change/

例：
https://jsfiddle.net/vwyrwz61/

使用Javascript按钮切换功能可以使用下拉选项

1 个答案: