代码之家 › 专栏 › 技术社区 › fab

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

google-visualization charts php javascript

fab · 技术社区 · 7 年前

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

我尝试过的事情: 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));
}

2 回复 | 直到 7 年前

fab 7 年前

经过一些实验,材料折线图目前似乎不支持注释。更新了我的代码,改为使用经典折线图,并在中遵循了@asgallant建议 Google Charts API: Always show the Data Point Values using arrayToDataTable. How? 使用数据视图。

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

Joseph_J 7 年前

根据您发布的源代码,您的注释列应该如下所示。

您发布了:

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