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

Posted 2021-04-09

因此，我已经读过，当隐藏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，但此刻没有运气

答案

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

建议用google.charts.load替换“on page load”功能 移动所有页面加载的东西

当返回承诺时，您可以在没有 - > 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...
          }

        });

      });
  });
});