Question

在这里，我正在尝试绘制过去三年数据的售价与月份的折线图。数据列表来自当年，去年和去年的数据库。

所以，我从php代码制作了一个像下面的数组一样的数据数组：

[
['January',  37.8, 80.8, 41.8],
['February',  30.9, 69.5, 32.4],
['March',  25.4,   57, 25.7],
['April',  11.7, 18.8, 10.5],
['May',  11.9, 17.6, 10.4],
['June',   8.8, 13.6,  7.7],
['July',   7.6, 12.3,  9.6],
['August',  12.3, 29.2, 10.6],
['September',  16.9, 42.9, 14.8],
['October', 12.8, 30.9, 11.6],
['November',  5.3,  7.9,  4.7],
['December',  6.6,  8.4,  5.2]
]

然后使用dataJson参数将其传递给Google图表绘制函数。看到：

<script type="text/javascript">
  let dataJson = '<?php echo $dataJson; ?>';
  var newData = JSON.parse((dataJson));

  google.charts.load('current', {'packages':['line']});
  var  data="";
  google.charts.setOnLoadCallback(salesChart);

  function salesChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Months');
    data.addColumn('number', '2019');
    data.addColumn('number', '2018');
    data.addColumn('number', '2017');
    data.addRows(newData);
    var options = {
    'title' : 'All over Sales',
      hAxis: {
        title: 'Month'
      },
      vAxis: {
        title: 'Selling Price'
      },
      width: 900,
      height: 500,
      curveType: 'function'
    };
    var chart = new google.charts.Line(document.getElementById('salesgraph'));
    chart.draw(data, google.charts.Line.convertOptions(options));
  }
  </script>
  <div id="salesgraph"></div>

现在，图形就可以了。但是数据点应该在带有值的图形上可见。所以请引导我。

enter image description here

Answer 1

已更改：

google.charts.load('current', {'packages':['line','corechart']});

和

data.addColumn('string', 'Months');
  data.addColumn('number', '2019');
  data.addColumn({type: 'number', role: 'annotation'});
  data.addColumn('number', '2018');
  data.addColumn({type: 'number', role: 'annotation'});
  data.addColumn('number', '2017');
  data.addColumn({type: 'number', role: 'annotation'});

和

var chart = new google.visualization.LineChart（document.getElementById（'salesgraph'））;

并更改php数组，例如：

['January',  37.8,'37.8',  80.8,'80.8', 41.8,'41.8'],

Click here to see result !

Answer 2

您的代码中的所有内容似乎都没问题。唯一缺少的是选项中的 pointSize 。因此，将pointSize添加到所需的点大小，您将能够看到这些点。

例如：var options = { 'title' : 'All over Sales', hAxis: { title: 'Month' }, vAxis: { title: 'Selling Price' }, width: 900, height: 500, curveType: 'function', pointSize: 10, };

希望它将解决您的问题

Answer 3

请尝试以下。您必须添加注释以显示带有vaxis点的值。

[
['January',  37.8, 80.8, 41.8,41.8],
['February',  30.9, 69.5, 32.4,32.4],
['March',  25.4,   57, 25.7,25.7],
['April',  11.7, 18.8, 10.5,10.5],
['May',  11.9, 17.6, 10.4,10.4],
['June',   8.8, 13.6,  7.7,7.7],
['July',   7.6, 12.3,  9.6,9.6],
['August',  12.3, 29.2, 10.6,10.6],
['September',  16.9, 42.9, 14.8,14.8],
['October', 12.8, 30.9, 11.6,11.6],
['November',  5.3,  7.9,  4.7,4.7],
['December',  6.6,  8.4,  5.2,5.2]
] 


<script type="text/javascript">


  let dataJson = '<?php echo $dataJson; ?>';
  var newData = JSON.parse((dataJson));

  google.charts.load('current', {'packages':['line']});
  var  data="";
  google.charts.setOnLoadCallback(salesChart);

  function salesChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Months');
    data.addColumn('number', '2019');
    data.addColumn('number', '2018');
    data.addColumn('number', '2017');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addRows(newData);
    var options = {
    'title' : 'All over Sales',
      hAxis: {
        title: 'Month'
      },
      vAxis: {
        title: 'Selling Price'
      },
      width: 900,
      height: 500,
      curveType: 'function',
      pointSize: 5
    };
    var chart = new google.charts.Line(document.getElementById('salesgraph'));
    chart.draw(data, google.charts.Line.convertOptions(options));
  }
  </script>
  <div id="salesgraph"></div>

在Google图表中如何动态显示数据点？

3 个答案: