Как добавить вертикальную линию на оси X в диаграмму Google Chart (тип линии)? - PullRequest
Новая
       16

Как добавить вертикальную линию на оси X в диаграмму Google Chart (тип линии)?

0 голосов
/ 19 октября 2018

Я работаю с реагировать и Google Charts, и я только что нашел проблему, для которой я не могу найти решение.

У меня есть этот компонент 

<Chart chartType='Line' data={data} options={options} />

И вотзначения для данных и параметров: 

const data = [
        ["Year", "Value"],
        ["2020", 48.92],
        ["2025", 49.45],
        ["2030", 49.24],
        ["2035", 50.93],
        ["2040", 49.62],
        ["2025", 49.62]
 ];
    var options = {
        legend: "none",
        colors: ['#a52714', '#097138']
    };

Этот график работает хорошо, но теперь Мне нужно добавить вертикальную линию только в 2025 .

Как я могу это сделатьэто?

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 19 октября 2018

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

измените стиль аннотации на 'line',
вы можете добавить текст или пустую строку для рисования вертикальной линии ... 

const data = [
  ['Year', {role: 'annotation', type: 'string'}, 'Value'],
  ['2020', null, 48.92],
  ['2025', 'text', 49.45],
  ['2030', null, 49.24],
  ['2035', null, 50.93],
  ['2040', null, 49.62]
];
var options = {
  annotations: {
    stem: {
      color: '#097138'
    },
    style: 'line'
  },
  legend: 'none',
  colors: ['#a52714']
};

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value'],
    ['2020', null, 48.92],
    ['2025', 'text value', 49.45],
    ['2030', null, 49.24],
    ['2035', null, 50.93],
    ['2040', null, 49.62]
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    colors: ['#a52714']
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...