Question

我添加了DropDown Selection选项以在不同的图表数据集（对于相同的图表类型）和选择菜单之间进行选择，但它正常工作，但是在选择默认情况下“不可见”的选项时，图表宽度会有所缩小。

我很难找到错误，但在代码中没有成功。

HTML：

 <select id="target">
            <option value="sankey_1">Option 1</option>
            <option value="sankey_2">Option 2</option>
            <option value="sankey_3">Option 3</option>
        </select>

        <div id="sankey_1"; class="vis"></div>
        <div id="sankey_2"; class="inv"></div>
        <div id="sankey_3"; class="inv"></div>

CSS：

.inv {
  display: none;
}
.vis {
  width: 100%;
  height: 500px;
}

JavaScript的：

google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);


        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_1'));
        chart.draw(data);
      }

      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart1);

      function drawChart1() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);


        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_2'));
        chart.draw(data);
      }

      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart2);

      function drawChart2() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);


        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_3'));
        chart.draw(data);
      }


      $(window).resize(function(){
        drawChart();
        drawChart1();
        drawChart2();

      });

              document
                .getElementById('target')
                .addEventListener('change', function () {
                        'use strict';
                        var vis = document.querySelector('.vis'),
                                target = document.getElementById(this.value);
                        if (vis !== null) {
                                vis.className = 'inv';
                        }
                        if (target !== null ) {
                                target.className = 'vis';
                        }
                });

Answer 1

非常感谢，这对我有用。

这是修改后的部分代码。

    document
            .getElementById('target')
            .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),
                            target = document.getElementById(this.value);
                    if (vis !== null) {
                            vis.className = 'inv';
                    }
                    if (target !== null ) {
                            target.className = 'vis';
                                    drawChart();
                                    drawChart1();
                                    drawChart2();
                    }
            });

JS：下拉选择后图表宽度发生了变化

1 个答案: