javascript - 如何显示 Highcharts 取决于 HTML 中的选择标签

Question

如何使用 HTML 中 select 的值来指定显示 Highchart 图表？
例如，如果我想显示昨天的图表，我只需在 HTML 页面的选择表单中选择昨天。就像我想显示三月的图表一样，我只需选择三月。每个图表都是一个外部 JS，与 HTML 分开。 (1 个图表 1 个 js 文件)

HTML 选择

<select class="selectpicker" data-width="15%" data-style="btn-danger">
  <option id="yesterday" value="yesterday">Yesterday</option>
  <option id="pre_month_1" value="pre_month_1">March</option>
  <option id="pre_month_2" value="pre_month_2">Febuary</option>
  <option id="pre_month_3" value="pre_month_3">January</option>
</select>

<div id="graph_power_yesterday" style="height: 400px;"></div>
<div id="graph_power_march" style="height: 400px;"></div>

第一个js文件(第一张图)

$(document).ready(function (){
  function read(){
    $.post("graph_power_yesterday.php", 
      function(data, status){
        if(status == 'success'){
          cur_date = (data.cur_date.join(','));
          pow_dat_1hr_00 = Number(data.pow_dat_1hr_00.join(','));  
          graph_power_yesterday(cur_date,  pow_dat_1hr_00);
        }
  });
};

read();

function graph_power_yesterday(cur_date, pow_dat_1hr_00){
    Highcharts.chart('graph_power_yesterday', {
      // ====
    });
  };
});

第二个js文件(第二个图)

$(document).ready(function (){
  function read(){
    $.post("graph_power_march.php", 
      function(data, status){
        if(status == 'success'){
          cur_date = (data.cur_date.join(','));
          pow_dat_1hr_00 = Number(data.pow_dat_1hr_00.join(','));  
          graph_power_march(cur_date,  pow_dat_1hr_00);
        }
  });
};

read();

function graph_power_march(cur_date, pow_dat_1hr_00){
    Highcharts.chart('graph_power_march', {
      // ====
    });
  };
});

Answer 1

检查 fiddle 的工作情况。

fiddle .

<script src="http://code.highcharts.com/highcharts.js"></script>
<p align="left">
  <select id="chartType">
    <option value="0">-select chart type-</option>  
    <option value="line">line</option>
    <option value="column">column</option>
</select>
</p>
<pre>

</pre>


        <script>
           $(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            title: 'please select a category'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//here we have a common timeline  (dates)
        }
    });

    $(".test").change(function() {
         var value = $(this).find(":selected").val();
        while (chart.series.length > 0) {
            chart.series[0].remove(true);
        }
        alert(value);
        if (value == 'a') {
            chart.yAxis[0].setTitle({ text: "#Active Learners" });
            chart.setTitle({text: "Active Learners"});
            chart.addSeries({
                name: '#Active Leaners',
                type: 'column',
                color: '#43cd80',  
                data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]//no. of active learners           
            });      

        } else if (value == 'b') {
            chart.addSeries({
                name: 'grade1',
                type: 'column',
                color: '#7FCDBB',  
                data:[100, 280, 300, 490, 670, 900,100,200,300,400,500,100]             
            });
            chart.addSeries({
                name: 'grade2',
               type: 'column',
               color: '#41B6C4',  
                data:[100, 200, 300, 400, 100, 200,900,800,300,500,200,100]             
            });                      
            chart.addSeries({
                name: 'grade3',
               type: 'column',
                color: '#1D91C0',  
                data:[234,578,234,895,234,54,214,234,474,214,123,235]             
            });
             chart.addSeries({
                name: 'grade4',
               type: 'column',
                color: '#253494',  
                data:[343,132,467,124,214,55,73,546,435,23,56,746]             
            });               
            chart.yAxis[0].setTitle({ text: "#Learners" });
            chart.setTitle({ text: "Learners per grade" });
        } else if (value == 'c') {
            chart.addSeries({
                name: 'age group 1',
                type: 'column',
                color: '#FCC5C0',  
                data:[450, 770, 540, 110, 340, 870,200,500,300,600,100]             
            });
            chart.addSeries({
                name: 'age group 2',
                type: 'column',
                color: '#F768A1',
                data:[563,234,675,567,234,834,341,415,300,200,100,200,400]
            });
            chart.addSeries({
                name: 'age group 3',
                type: 'column',
                color: '#AE017E',
                data:[100,200,300,400,500,100,200,300,400,500]
            });
            chart.addSeries({
                name: 'age group 4',
                type: 'column',
                color: '#49006A',
                data:[400,300,200,400,200,300,500,600,100,600,700]
            });
        } else {
                chart.addSeries({
                name: 'total number of learners',
                type: 'column',
                color: '#ffcc99',  
                data:[100,0,200,0,300,100,400,100,500,200,500,300]             
            }); 
        }
    });
});
    </script>

希望有帮助。谢谢