Google Charts API：在折線圖中顯示數據點值

Question

我剛接觸PHP，並獲得了一個使用Google Visualization的項目。 在下面的代碼中，如何在折線圖上永久顯示數據值和數據點？

事情我已經嘗試：1.設置pointSize到某一值2.設置dataOpacity 1 3.添加此注釋列<? php echo {type: 'string', role: 'annotation'} ?>, <? php echo {type: 'string', role: 'annotation'} ?>,如此處所示： Google Charts API：始終使用arrayToDataTable顯示數據點值。 怎么樣？ 但是卻出現了服務器錯誤。 我可能做錯了。

感謝您的幫助。 謝謝！

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

經過一些試驗后，看來“材料折線圖”目前不支持注釋。 已更新我的代碼以改為使用經典折線圖，並遵循Google Charts API中的 @asgallant建議：始終使用arrayToDataTable顯示數據點值。 怎么樣？ 使用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>

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 個解決方案

解決方案1
2 已采納 2018-03-26 06:25:49

解決方案2
0 2018-03-24 09:47:36

Google Charts API：在折線圖中顯示數據點值

問題描述

2 個解決方案

解決方案1 2 已采納 2018-03-26 06:25:49

解決方案2 0 2018-03-24 09:47:36

解決方案1
2 已采納 2018-03-26 06:25:49

解決方案2
0 2018-03-24 09:47:36