Google Charts API：在折线图中显示数据点值答案

【问题标题】：Google Charts API: Show Data Point Values in Line ChartGoogle Charts API：在折线图中显示数据点值
【发布时间】：2018-03-26 14:25:49
【问题描述】：

我对 PHP 还是很陌生，并且得到了一个使用 Google Visualization 的项目。在下面的代码中，如何在折线图上永久显示数据值和数据点？

我尝试过的事情： 1.将pointSize设置为某个值 2.将dataOpacity设置为1 3.添加此注释列<? php echo {type: 'string', role: 'annotation'} ?>,，如下所示：Google Charts API: Always show the Data Point Values using arrayToDataTable. How? 但得到了服务器错误。我可能做错了。

感谢您的帮助。谢谢！

function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Year', 'Payout Ratio'],
        [<?php echo json_encode(date('Y', strtotime('-1 year'))); ?>,  <?php echo json_encode($oneYearAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-2 year'))); ?>,  <?php echo json_encode($twoYearsAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-3 year'))); ?>,  <?php echo json_encode($threeYearsAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-4 year'))); ?>,  <?php echo json_encode($fourYearsAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-5 year'))); ?>,  <?php echo json_encode($fiveYearsAgoPayoutRatio); ?>]
    ]);

  var options = {
    chart: {
      title: 'Payout Ratio',
    },
    backgroundColor: '#fafbfc',
    colors: ['#3073b5'],
  };

  var chart = new google.charts.Line(document.getElementById('payout_ratio'));

  chart.draw(data, google.charts.Line.convertOptions(options));
}

【问题讨论】：

到底是什么问题？您是否难以聚合正确的数据或正确可视化正确的数据？
调试错误的一个好方法是分析错误信息。你能告诉我们你遇到了什么错误吗？
您使用的是 Material 折线图 (google.charts.Line) 与 Classic (google.visualization.LineChart) - 有一个数字Material 不支持的选项，包括 pointSize 和 dataOpacity，以及列角色（注释），请参阅 --> Tracking Issue for Material Chart Feature Parity...

标签： javascript php charts google-visualization

【解决方案1】：

经过一些实验，Material Line Chart 目前似乎不支持注解。已更新我的代码以改用经典折线图，并按照Google Charts API: Always show the Data Point Values using arrayToDataTable. How? 中的@asgallant 建议使用 DataView。

<html>
  <head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Payout Ratio'],
          ['2004',  1.2],
          ['2005',  -0.25],
          ['2006',  2.5],
          ['2007',  5.8]
        ]);
        
        // Use view to show annotation
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },]);

      var options = {
        title: 'Payout Ratio',
        backgroundColor: '#fafbfc',
        colors: ['#3073b5'],
        // Display data point
        pointSize: 5,
      };

        var chart = new google.visualization.LineChart(document.getElementById("payout_ratio"));
        chart.draw(view, options);
    }
</script>
  </head>
  <body>
    <div id="payout_ratio" style="width: 500px; height: 300px"></div>
  </body>
</html>

【讨论】：

【解决方案2】：

根据您发布的来源，您的注释列应如下所示。

您发布了：

<? php echo {type: 'string', role: 'annotation'} ?>

例如：

[/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */]

这也是js所以你不需要在php中回显它。

所以你的代码块部分看起来像这样：

var data = google.visualization.arrayToDataTable([
    [/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */],        
    ['Year', 'Payout Ratio'],
    [<?php echo json_encode(date('Y', strtotime('-1 year'))); ?>,  <?php echo json_encode($oneYearAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-2 year'))); ?>,  <?php echo json_encode($twoYearsAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-3 year'))); ?>,  <?php echo json_encode($threeYearsAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-4 year'))); ?>,  <?php echo json_encode($fourYearsAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-5 year'))); ?>,  <?php echo json_encode($fiveYearsAgoPayoutRatio); ?>]
]);

【讨论】：

虽然我没有走这条路，但正确的使用方法是...['Year', {type: 'string', role: 'annotation'}, 'Payout Ratio'], [<?php echo json_encode(date('Y', strtotime('-1 year'))); ?>, <?php echo json_encode($oneYearAgoPayoutRatio); ?>, <?php echo json_encode($oneYearAgoPayoutRatio); ?>],...我想将支付率显示为注释，因此我在注释列。
@fab 很高兴你知道了。