时间戳

首页 > 解决方案 > 谷歌图表问题与图表上的值

javascript - 谷歌图表问题与图表上的值

问题描述

嘿，任何人都可以帮助我解决我在使用谷歌图表时遇到的问题。

问题是数字没有按 1、2、3 等比例缩放……您可以在图表左侧的图像上看到。 在此处输入图像描述

JavaScript 和 PHP 代码

<script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Data', 'Count' , 'Approved' , 'Drafted'],
        <?php
      $elements_text = ['Posts' , 'Categories', 'Users','Comments'];
      $element_count =[$post_count,$categories_count,$users_count,$comment_count];
      $element_published = [$published_posts,'0',$admins_count,$approved_comments_count];
      $element_drafted = [$drafted_posts,'0',$subscriber_count,$unapproved_comments_count];


      for($i =0; $i<4 ; $i++){
        echo "['{$elements_text[$i]}'" . "," . "'{$element_count[$i]}'" . "," . "'{$element_count[$i]}'" . "," . "'{$element_drafted[$i]}'],";
      }
         ?>


      ]);

      var options = {
        chart: {
          title: 'Admin data',
          subtitle: 'Charst panel',
        }
      };

      var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
</script>

你可以看到 6 小于 0 :D

标签： javascriptphpgoogle-visualization

解决方案

至关重要的是，这不是将数据从 PHP 传递到 JavaScript 的方法。在任何情况下都不要尝试构建自己的 JSON 或其他此类结构；它永远不会始终如一地工作。用于json_encode()此。除了正确转义字符串之外，它还确保整数被正确传递。

<?php
$elements = [
    ["Data", "Count", "Approved", "Drafted"],
    ["Posts", $post_count, $published_posts, $drafted_posts],
    ["Categories", $categories_count, 0, 0],
    ["Users", $users_count, $admins_count, $subscriber_count],
    ["Comments", $comment_count, $approved_comments_count, $unapproved_comments_count],
];
?>
<script>
google.charts.load("current", {packages: ["bar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    const elements = <?= json_encode($elements) ?>;
    const data = google.visualization.arrayToDataTable(elements);
    const options = {chart: {title: "Admin data", subtitle: "Chart data"}};
    const chart = new google.charts.Bar(document.getElementById("columnchart_material"));
    chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>

如果您在修复此代码后仍然遇到问题，我建议您查看您传递给图表的数据，因为它可能不是您所期望的。由于您的原始代码正在重复数据，$element_count[$i]这可能是您的问题。

推荐阅读