Question

我想在一个页面上显示多个Google Charts。我搜索了一个解决方案，并在这个网站找到了一个。一种轻松创建新图表的功能。现在它只使用一个图表，当我添加第二个图表时，它们都不再有效。 Json和div id是正确的，当我只使用1个图表的代码时，两者都有效。知道这里有什么问题/解决方案吗？

$(function() {
var jsonDataClicks = $.ajax({
    url: 'ajax/get-total-clicks.php',
    dataType: 'json',
    async: false
    }).responseText;

var jsonDataActiveProducts = $.ajax({
    url: 'ajax/get-total-active-products.php',
    dataType: 'json',
    async: false
    }).responseText;

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

google.charts.setOnLoadCallback(function() {
    drawChart(jsonDataClicks, 'total_clicks');
});

google.charts.setOnLoadCallback(function() {
    drawChart(jsonDataActiveProducts, 'total_active_products');
});

function drawChart(dataInput, containerID) {
    var data = new google.visualization.DataTable(dataInput);
    var containerDiv = document.getElementById(containerID);

    var options = {
        vAxis: {
            gridlines: {
                color: '#ebebeb'
            }
        },
        animation: {
            startup: true,
            duration: 1000,
            easing: 'out'
        },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 45,
            textStyle : {
                fontName: 'Lato',
                fontSize: 11,
                color: '#6f6f6f'
            }
        },
        vAxis: {
            textStyle: {
                fontName: 'Lato',
                fontSize: 11,
                color: '#6f6f6f'
            }
        },
        tooltip: {
            textStyle: {
                fontName: 'Lato',
                fontSize: 11,
                color: '#6f6f6f'
            }
        },
        width: 1160,
        height: 400,
        chartArea: {'width': '80%', 'height': '80%'},
        colors: ['#47ab8b'],
        legend: 'none'
    };

    var chart = new google.visualization.ColumnChart(containerDiv);

    chart.draw(data, options);
}

}）;

Answer 1

方法 - ＆gt; google.charts.setOnLoadCallback - 每页加载时应该只调用一次

而是将'callback'添加到google.charts.load语句

另外，强烈建议不要使用 async: false进行$.ajax来电

您可以在$.ajax({}).done

上绘制图表

建议以下类似的设置...

$(function() {
  google.charts.load('current', {
    'callback': function () {

      drawChart('ajax/get-total-clicks.php', 'total_clicks');
      drawChart('ajax/get-total-active-products.php', 'total_active_products');

      function drawChart(dataURL, containerID) {
        $.ajax({
          url: dataURL,
          dataType: 'json'
        }).done(function (dataInput) {
          var data = new google.visualization.DataTable(dataInput);
          var containerDiv = document.getElementById(containerID);

          var options = {
              vAxis: {
                  gridlines: {
                      color: '#ebebeb'
                  }
              },
              animation: {
                  startup: true,
                  duration: 1000,
                  easing: 'out'
              },
              hAxis: {
                  slantedText: true,
                  slantedTextAngle: 45,
                  textStyle : {
                      fontName: 'Lato',
                      fontSize: 11,
                      color: '#6f6f6f'
                  }
              },
              vAxis: {
                  textStyle: {
                      fontName: 'Lato',
                      fontSize: 11,
                      color: '#6f6f6f'
                  }
              },
              tooltip: {
                  textStyle: {
                      fontName: 'Lato',
                      fontSize: 11,
                      color: '#6f6f6f'
                  }
              },
              width: 1160,
              height: 400,
              chartArea: {'width': '80%', 'height': '80%'},
              colors: ['#47ab8b'],
              legend: 'none'
          };

          var chart = new google.visualization.ColumnChart(containerDiv);
          chart.draw(data, options);
        });
      }
    },
    'packages':['corechart']
  });
});

多个Google Charts，只有一个有效

1 个答案: