在选择

Question

当从下拉菜单中选择一个选项时，我需要一些帮助来更改图表中的数据。我搜索过类似的问题，但没有什么是真正有用的。

到目前为止，我有这段代码而且我不明白我错过了什么不能正常工作？

html：

<div id="scroll-container">
        <select id="menu">
            <option value="Oil">Oil</option>
            <option value="Gas">Gas</option>
        </select>

        <div id="container_Oil" data-role="ejmchart" style="height: 320px"></div>
        </div>

和javascript部分：

<script>
            $(function () {
                var value = document.getElementById("menu").value;
                var chart = document.getElementById("container_Oil");


                    $('#menu').change(function(evt){  

                        var dataSelection = eval($("#menu").val());
                        var chart = $('#container_Oil').ejChart ({
                            dataSource: dataSelection

                        })

                })

            })
        </script>

我用于图表的日期，我在另一个文件app.js中，它包含以下内容：

var Oil = ...
var Gas = ...
$("#container_Oil").ejChart(
        {
            primaryXAxis:
                  {
                      //labelFormat: 'dd, MM',
                      //labelFormat: "{value}",
                      range: { min: 1, max: 30, interval: 2 },
                      font: { size: '10px' },
                      labelRotation: 20,
                      visible :false
                  },
            primaryYAxis:
                 {
                     labelFormat: "{value}",
                     //range: { min: 39, max: 40, interval: 0.1 },
                     rangePadding: 'normal',
                     font: { size: '10px' },
                     visible : false
                 },
            commonSeriesOptions: {
                tooltip: { visible: true },
                type: 'line', enableAnimation: false,
                marker:
                      {
                          shape: 'circle',
                          size:
                            {
                                height: 5, width: 5
                            },
                          visible: true
                      },
                border: { width: 2 }
            },

            series: [{
                //Binding series with a JSON data source
                dataSource: Oil,
                //Mapping name of the field containing X value to series
                //xName: 'Day',
                //Mapping name of the field containing Y value to series
                yName: 'Actual',
                name: 'Actual'
            },
            {   dataSource: Oil,
                //xName: 'Day',
                yName: 'Plan',
                name: 'Plan'
            }
            ],  

            canResize: true,
            load: 'onchartload',
            title: { text: 'Product - Oil', font: { size: '12px' } },
            legend: { visible: true, position: "top" }
        });

我希望当我在选择器中选择Gas时，将图表的dataSource从Oil更改为Gas。

我尝试过调试，它说＆＃34; Oil＆＃34;和＆＃34; Gas＆＃34;未定义。然后我试着把数据放到＆＃34; Oil＆＃34;和＆＃34; Gas＆＃34;与脚本在同一个文件中。没有更多的错误，但仍然无法正常工作。我想我的代码中缺少一些重要的东西，但我似乎无法理解什么。一点点帮助不仅仅是欢迎！

Answer 1

也许它只会在页面加载时创建图表？由于它只有两个图表，您可以在页面加载时创建它们，然后隐藏并显示div，具体取决于快速修复的下拉值。

Answer 2

你有没有尝试过？

 $('#menu').on( "change", function(evt){

Instade of：

$('#menu').change(function(evt){