Section Views 显示基于复选框选择，如何绘制具有良好图例的图表？Google

Question

所以我读到当 div 被隐藏时你不能画出漂亮的 Google 图表，不知何故传说已经偏离了。

现在我正在尝试我在这里找到的一些解决方案，但其中 none 似乎有效。我将其用作绘制图表功能的最后一部分

var container = document.getElementById("chart1");
    container.style.display = null;
    var chart = new google.visualization.PieChart(container);

    chart.draw(data, options);


    and my Google Chart calls

//  Section1
        google.charts.setOnLoadCallback(drawA1);
        google.charts.setOnLoadCallback(drawA2);
        google.charts.setOnLoadCallback(drawA3);
        google.charts.setOnLoadCallback(drawa4);
        google.charts.setOnLoadCallback(drawA5);
        //Section2
        google.charts.setOnLoadCallback(drawB1);
        google.charts.setOnLoadCallback(drawB2);
        google.charts.setOnLoadCallback(drawB3);
        google.charts.setOnLoadCallback(drawB4);
        // Section3
        google.charts.setOnLoadCallback(drawC1);
        google.charts.setOnLoadCallback(drawC2);
        google.charts.setOnLoadCallback(drawC3);
        google.charts.setOnLoadCallback(drawC4);
        google.charts.setOnLoadCallback(drawC5);
        google.charts.setOnLoadCallback(drawC6);

在页面加载时隐藏所有部分，这是根据选中的复选框显示隐藏部分视图的功能

// Show / Hide Section Views
                $("input[name='section_view[]']:checked").each(function ()
                {
                    var inputValue = $(this).attr("value");

                    $("#section_view" + inputValue).toggle();
                    $("#menuItemSection" + inputValue).toggle();
                });

我还可以尝试什么才能按预期绘制 google 图表？？？

ps：我正在尝试我的情况，但目前运气不好

Answer 1

首先，setOnLoadCallback每次页面加载只需要调用一次
但您可以使用 load 语句 returns 的承诺代替
此外，load 语句将在返回 promise
之前等待页面加载因此，google.charts.load 可以用来代替 --> $(document).ready（或类似的方法）

建议用 google.charts.load
替换 "on page load" 函数将所有页面加载内容移到那里

并且当返回 promise 时，您可以开始绘制图表而无需 --> setOnLoadCallback
当部分可见时，使用切换的 complete 选项来了解 toggle 何时完成
（只提供一个功能）

然后绘制图表
您可能可以使用 inputValue 来知道要绘制哪个图表
请参阅以下示例...

// replace $(document).ready with the following

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {  // <-- promise function returned

  // move on page load stuff here

  // move draw chart functions here...
  $("input[name='section_view[]']:checked").each(function ()
  {
      var inputValue = $(this).attr("value");
      $("#section_view" + inputValue).toggle(function () {

        $("#menuItemSection" + inputValue).toggle(function () {

          // draw chart
          switch (inputValue) {
            case 'A1':
              drawA1();
              break;

            case 'B1':
              drawB1();
              break;

            // etc...
          }

        });

      });
  });
});

Section Views 显示基于复选框选择，如何绘制具有良好图例的图表？Google

Section Views displays based on checkbox selection, how to draw Google Charts with good legend?

charts

hidden

google-visualization