Question

所以我已经读过，当隐藏div时，你无法绘制出漂亮的Google Charts，不知何故传说已经过时了。

现在我正在尝试一些我在这里找到的解决方案，但它们似乎都没有效果。我使用它作为绘制图表函数的最后一部分

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();
                });

我还能尝试什么，以便按预期绘制谷歌图表？

ps：我正在为我的情况尝试How to fix overlapping Google Chart legend，但目前没有运气

Answer 1

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

建议使用google.charts.load替换＆＃34;页面加载＆＃34; 功能移动所有页面加载的东西

并且当返回承诺时，您可以开始绘制图表而不用 - ＆gt; 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...
          }

        });

      });
  });
});

部分视图根据复选框选择显示，如何使用好的图例绘制Google Charts？

1 个答案: