如何使用一个下拉菜单更新两个highcharts？

Question

我对编码很陌生，而且我在创建一个同时加载两个高图的下拉列表时遇到了问题。

我尝试更改选项名称以避免重复并合并两个列表更改值事件，因此两个更改都在单个函数中进行。

[Here is my jsfiddle][1]


<http://jsfiddle.net/hirschle/unwb4wvg/1/>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<select id="list" name="list" multiple="multiple">
   <option value="A">Gender</option>
   <option value="B">Race</option>
   <option value="C">Earnings</option>
</select>

<div>
   <div id="container" class="container" style="height: 600px"></div>
   <div id="container2" class="container" style="height: 600px"></div>
</div>

请你看看我的小提琴并做出更新或建议解决方案。非常感谢你！

[1]: http://jsfiddle.net/hirschle/unwb4wvg/1/

Answer 1

以下是解决方案：jsfiddle

var chart=new Highcharts.Chart(options);
$('#container').append(chart);
var chart1=new Highcharts.Chart(options1);
$('#container2').append(chart1);

此外，代码段会显示结果。

＆＃13;

＆＃13;

$(function() {
      var options = {
        chart: {
          renderTo: 'container',
          defaultSeriesType: 'column',
          type: 'column',
          margin: 75,
          options3d: {
            enabled: false,
            alpha: 8,
            beta: 7,
            depth: 2000

          }
        },
        plotOptions: {
          area: {
            stacking: 'normal',
            marker: {
              symbol: 'circle',
              radius: 1,
              states: {
                hover: {
                  enabled: true
                }
              }
            }
          }
        },

        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: 10,
          y: 50,
          floating: false,
          borderWidth: 1,
          backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: true
        },
        title: {
          text: 'Average Age at Death by Gender, Race, and Birth Cohort'
        },
        xAxis: {
          categories: ['1980-89', '1990-99', '2000-09', '2010-19', '2020-29', '2030-2039'],
          labels: {
            rotation: -45,
            style: {
              fontSize: '15px',
              fontFamily: 'Verdana, sans-serif'
            }
          }
        },


        yAxis: {
          title: {
            text: 'Average Age at Death',
            fontSize: '15px',

          },
          labels: {
            style: {
              fontSize: '15px'
            }
          }
        },

        series: []
      }

      var options1 = {
        chart: {
          renderTo: 'container2',
          defaultSeriesType: 'column',
          type: 'column',
          margin: 75,
          options3d: {
            enabled: false,
            alpha: 8,
            beta: 7,
            depth: 2000

          }
        },
        plotOptions: {
          area: {
            stacking: 'normal',
            marker: {
              symbol: 'circle',
              radius: 1,
              states: {
                hover: {
                  enabled: true
                }
              }
            }
          }
        },

        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: 10,
          y: 50,
          floating: false,
          borderWidth: 1,
          backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: true
        },
        title: {
          text: 'Average Age at Death by Gender, Race, and Birth Cohort'
        },
        xAxis: {
          categories: ['1980-89', '1990-99', '2000-09', '2010-19', '2020-29', '2030-2039'],
          labels: {
            rotation: -45,
            style: {
              fontSize: '15px',
              fontFamily: 'Verdana, sans-serif'
            }
          }
        },


        yAxis: {
          title: {
            text: 'Average Age at Death',
            fontSize: '15px',

          },
          labels: {
            style: {
              fontSize: '15px'
            }
          }
        },

        series: []
      }

      $("#list").on('change', function() {
        var selVal = $("#list").val();
        if (selVal == "A") {
          options.series = [{
            name: 'Male',
            data: [5,6,7,8,9,10],

          }]

          options1.series = [{

            name: 'Female',
            data: [5,6,7,8,9,10],

          }]

        } else if (selVal == "B") {
          options.series = [{
            name: 'White',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other',
            data: [5,6,7,8,9,10],

          }]
          options1.series = [{
            name: 'White',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other',
            data: [5,6,7,8,9,10],

          }]
        } else if (selVal == "C") {
          options.series = [{
            name: 'Ern<Med',
            data: [5,6,7,8,9,10],

          }]
          options1.series = [{

            name: 'Ern>=Med',
            data: [5,6,7,8,9,10],

          }]
        } else if (selVal == "A,B") {
          options.series = [{

            name: 'White Male',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black Male',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Male',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Male',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other Male',
            data: [5,6,7,8,9,10],

          }]

          options1.series = [{
            name: 'White Female',
            data: [0,0,2,2,100,120],

          }, {
            name: 'Black Female',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Female',
            data: [5,6,7,8,9,10],


          }, {
            name: 'Asian Female',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other Female',
            data: [5,6,7,8,9,10],

          }]
        } else if (selVal == "A,C") {
          options.series = [{

            name: 'Male Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Male Ern>=Med',
            data: [5,6,7,8,9,10],

          }]

          options1.series = [{
            name: 'Female Ern<Med',
            data: [5,6,7,8,9,10],


          }, {
            name: 'Female Ern>=Med',
            data: [5,6,7,8,9,10],

          }]

        } else if (selVal == "B,C") {
          options.series = [{
            name: 'White, Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other Ern<Med',
            data: [5,6,7,8,9,10],

          }]

          options1.series = [{

            name: 'White, Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other Ern>=Med',
            data: [5,6,7,8,9,10],

          }]


        } else if (selVal == "A,B,C") {
          options.series = [{

            name: 'White Male Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'White Male Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black Male Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Black Male Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Male Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Male Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Male Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Male Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other Male Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Other Male Ern>=Med',
            data: [5,6,7,8,9,10],

          }]
          options1.series = [{
            name: 'White Female Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'White Female Ern>=Med',
            data: [5,6,7,8,9,10],


          }, {
            name: 'Black Female Ern<Med',
            data: [5,6,7,8,9,10],


          }, {
            name: 'Black Female Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Female Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Hispanic Female Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Female Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Asian Female Ern>=Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Female Other Ern<Med',
            data: [5,6,7,8,9,10],

          }, {
            name: 'Female Other Ern>=Med',
            data: [5,6,7,8,9,10],

          }]
        }
       var chart=new Highcharts.Chart(options);
       $('#container').append(chart);
       var chart1=new Highcharts.Chart(options1);
       $('#container2').append(chart1);
      });
 });

＆＃13;

.container {
  display: inline-block;
  height: 500px;
  width: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<select id="list" name="list" multiple="multiple">
  <option value="A">Gender</option>
  <option value="B">Race</option>
  <option value="C">Earnings</option>
</select>

<div>
  <div id="container" class="container" style="height: 600px"></div>
  <div id="container2" class="container" style="height: 600px"></div>
</div>

＆＃13;

＆＃13;

＆＃13;