Как построить точечный график и линейный график на одном графике с помощью Google-карт - PullRequest
Новая
       17

Как построить точечный график и линейный график на одном графике с помощью Google-карт

4 голосов
/ 29 марта 2019

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

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

Я должен построить линейный график этих данных с помощью Google-Visualization и выделить (или разбросать) некоторые точки на линии. точки, например: 

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

У меня есть следующий код rightnow 

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

пример изображения результата, который я хочу (график не построен на значениях в вопросе) enter image description here

1 Ответ

2 голосов
/ 29 марта 2019

, чтобы выделить отдельные точки, у вас есть пара вариантов.

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

см. Следующий рабочий фрагмент ... 

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