Question

我是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));
}

Answer 1

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

＆＃13;

<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>

＆＃13;

Answer 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); ?>]
]);

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

2 个答案: