Блог

У меня есть некоторые исходные данные, такие как

 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) используйте роль столбца стиля

роль столбца стиля позволяет применять стиль к отдельным значениям в таблице данных.

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

в таблице данных столбец style должен сразу следовать за рядом с помощью styled.
при использовании линейного графика вы должны присвоить 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) добавьте еще один ряд и измените тип ряда на scatter.

сначала добавьте еще один столбец в таблицу данных для второго ряда.

 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>