Google Charts API: Always show the Data Point Values using arrayToDataTable. How?

问题

First I'd like to let it be known that although there is a similar question labeled:

Google Charts API: Always show the Data Point Values in Graph

...on the site, I can't seem to use it's solution since my chart is fed using arrayToDataTable.

Here's my code:

  function drawChart1998() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Index Trend'],
      ['1/3', 1236777],
      ['1/7', 834427],
      ['1/10', 2164890],
      ['1/14', 1893574],
      ['1/17', 2851881],
      ['1/21', 359504],
      ['1/24', 2264047],
      ['1/28', 3857933],
      ['1/31', 2197402],
      ['2/4', 2469935],
      ['2/7', 1651752],
      ['2/11', 4710582],
      ['2/14', 1565803],
      ['2/18', 345499],
      ['2/21', 2817319],
      ['2/25', 733242],
      ['2/28', 1485788],
      ['3/4', 1091181],
      ['3/7', 4477498],
      ['3/11', 490931],
      ['3/14', 3905556],
      ['3/18', 475417],
      ['3/21', 1512729],
      ['3/25', 1782796],
      ['3/28', 4778434]

    ]);

    var options = {
      curveType: "function",
      title: '1998 Results',
      vAxis: {viewWindow: {min: 0, max: 5006386}},
      hAxis: {textStyle: {color: 'black', fontName: 'verdana', fontSize: 10} },
      series: {0: { pointSize: 6 }}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_1998'));
    chart.draw(data, options);

  }

As you can see, I managed to set the series to display the DataPoint dots but I can't seem to figure out how to incorporate the following line of code as the previous post on the site suggests in order to display the values for each DataPoint.

data.addColumn({type: 'string', role: 'annotation'});

回答1:

For reference, you can input an annotation column to your DataTable using the arrayToDataTable method. Pass an object instead of a string for the column header:

var data = google.visualization.arrayToDataTable([
    [/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */],
    // ...
]);

This works for any column role.

If you just want to display the value of a data point, you don't have to add an extra column to your DataTable. You can use a DataView to add an "annotation" column, calculated as the string-value of a source column:

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    type: 'string',
    role: 'annotation',
    sourceColumn: 1,
    calc: 'stringify'
}]);

Then draw the chart using the view instead of the DataTable:

chart.draw(view, options);

来源：https://stackoverflow.com/questions/22771630/google-charts-api-always-show-the-data-point-values-using-arraytodatatable-how

标签

javascript

jquery

charts

google-visualization