个人中心
gpt4 book ai didi

javascript - 谷歌图表 API : Show Data Point Values in Line Chart

转载 作者：行者123 更新时间：2023-11-30 14:42:15 25 4
gpt4 key购买 nike

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

我尝试过的事情:1.设置pointSize到一定的值(value)2.设置dataOpacity到 13. 添加此注释列<? php echo {type: 'string', role: 'annotation'} ?>,如此处所建议:Google Charts API: Always show the Data Point Values using arrayToDataTable. How?但 gota 服务器错误。我可能做错了。

感谢您的帮助。谢谢!

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 Line Chart似乎不支持标注。已更新我的代码以改用经典折线图，并遵循 Google Charts API: Always show the Data Point Values using arrayToDataTable. How? 中的@asgallant 建议使用数据 View 。 

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

关于javascript - 谷歌图表 API : Show Data Point Values in Line Chart，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49463240/

25 4 0
文章推荐： c - 如何找到具有特定值的行或列的总和？
文章推荐： c - 如何修复C中的 'mremap chunk assertion error'
文章推荐： python - 在 Python 中编译 C DLL 并与之交互可以在 Unix 上运行，但不能在 Windows 上运行。这样做的正确方法是什么？
文章推荐： javascript - 如何在 JavaScript 中将 JSON 值分配给 var？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com