javascript - 如何使用Google图表在同一图形上绘制散点图和折线图

我有一些这样的股票数据

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

我必须使用google-visualization绘制此数据的折线图，并突出显示(或散布)在线上的某些点。这些要点例如:

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']
    });

我想要的结果的示例图像(图形未绘制在问题中的值上)

最佳答案

为了突出各个点，您有两种选择。

1)使用style列角色

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

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]
]);

在数据表中，样式列应立即跟随by样式的系列。
使用折线图时，必须给pointSize选项一个正值，
为了使该点可见。

例如pointSize: 0.1
请参阅以下工作片段...

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);
});

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

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

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  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]
  ]);

  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', '#a52714'],
    series: {
      1: {
        type: 'scatter',
        visibleInLegend: false
      }
    }
  };

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

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