使 Javascript 按钮切换功能与下拉选择一起使用

Question

我是 JavaScript、HTML 和 CSS 领域的新手。我有一个 HTML 页面，其中包含几个使用 Highcharts 创建的图表。该页面有一个包含印度各州列表的下拉菜单。当一个状态被 selected 时，所有图表都会更新该状态的数据。每个图表都有一组 2 个按钮（请参阅 fiddle link）。在切换按钮时，会加载不同的图表。

现在的问题是：我需要让这两个功能协同工作。也就是说，当我 select "Andhra Pradesh" 时，安得拉邦的数据应该加载到两个图表上。我能够让图表加载“2017-18”各州的相应数据，但不能为 "Other Years"。无法理解出了什么问题。这是 fiddle 的 link：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 按钮切换功能与下拉选择一起使用

Making Javascript button toggle function work with dropdown selection

javascript

jquery

html-select

highcharts