如何使用谷歌图表在同一图表上绘制散点图和折线图

Question

我有一些股票数据，像这样

index=[1,2,3,4,5]
price=[10,11,12,13,14]

我必须使用谷歌可视化绘制该数据的线图，并突出显示（或分散）线上的一些点。例如，要点是：

index=[1,3]
value=[11,13]

我现在有以下代码

function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number',"index");
data.addColumn("number",'price')
data.addRows([
  [1, 10],
  [2, 11],
  [3, 12],
  [4, 13],
  [5, 14]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
               'width':1200,
               'height':300, hAxis: {title: 'Year',  titleTextStyle: {color: '#333'},
               slantedText:true, slantedTextAngle:80},
      vAxis: {minValue: 0},
      explorer: { 
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0},
      colors: ['#D44E41'],};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

//Initailization
google.charts.load('current', {
      callback: drawChart,
      packages:['corechart']
    });

我想要的结果的示例图像（图表未绘制在问题中的值上）

Answer 1

要突出显示各个点，您有几种选择。

1）使用样式 栏角色

样式列角色允许您将样式应用于数据表中的各个值。

var data = new google.visualization.DataTable();
data.addColumn('number', 'index');
data.addColumn('number', 'price')
data.addColumn({type: 'string', role: 'style'})
data.addRows([
  [1, 10, null],
  [2, 11, 'point { size: 8; fill-color: #a52714; }'],
  [3, 12, null],
  [4, 13, null],
  [5, 14, null]
]);

在数据表中，样式列应紧跟在系列后面以按样式排列。
使用折线图时，必须为该pointSize选项指定正值，
以便该点可见。

例如pointSize: 0.1

请参阅以下工作片段...

var data = new google.visualization.DataTable();
data.addColumn('number', 'index');
data.addColumn('number', 'price')
data.addColumn({type: 'string', role: 'style'})
data.addRows([
  [1, 10, null],
  [2, 11, 'point { size: 8; fill-color: #a52714; }'],
  [3, 12, null],
  [4, 13, null],
  [5, 14, null]
]);

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'index');
  data.addColumn('number', 'price')
  data.addColumn({type: 'string', role: 'style'})
  data.addRows([
    [1, 10, null],
    [2, 11, 'point { size: 4; fill-color: #a52714; }'],
    [3, 12, null],
    [4, 13, null],
    [5, 14, null]
  ]);

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    width: 1200,
    height: 300,
    hAxis: {
      title: 'Year',
      titleTextStyle: {color: '#333'},
      slantedText: true,
      slantedTextAngle:80
    },
    vAxis: {
      minValue: 0
    },
    explorer: {
      actions: ['dragToZoom', 'rightClickToReset'],
      axis: 'horizontal',
      keepInBounds: true,
      maxZoomIn: 4.0
    },
    colors: ['#D44E41'],
    pointSize: 0.1,
  };

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

2)添加另一个系列并将系列类型更改为分散。

首先，向第二个系列的数据表添加另一列。

var data = new google.visualization.DataTable();
data.addColumn('number', 'index');
data.addColumn('number', 'price')
data.addColumn('number', 'point')
data.addRows([
  [1, 10, null],
  [2, 11, 11],
  [3, 12, null],
  [4, 13, null],
  [5, 14, null]
]);

在选项中，使用series选项更改系列类型。
如果需要，您还可以从图例中隐藏该系列。

series: {
  1: {
    type: 'scatter',
    visibleInLegend: false
  }
}

请参阅以下工作片段...

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

var data = new google.visualization.DataTable();
data.addColumn('number', 'index');
data.addColumn('number', 'price')
data.addColumn('number', 'point')
data.addRows([
  [1, 10, null],
  [2, 11, 11],
  [3, 12, null],
  [4, 13, null],
  [5, 14, null]
]);