Вертикальные бары на графиках свечей Google - PullRequest
Новая
       38

Вертикальные бары на графиках свечей Google

0 голосов
/ 24 мая 2018

Я пытаюсь добавить столбики вертикали на график свечей Google, но, похоже, он не работает.Пожалуйста, смотрите: https://jsfiddle.net/L0a8b04q/

 google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Mon', 28, 28, 38, 38],
          ['Tue', 38, 38, 55, 55],
          ['Wed', 55, 55, 77, 77],
          ['Thu', 77, 77, 66, 66],
          ['Fri', 66, 66, 22, 22]
          // Treat the first row as data.
        ], true);

        var options = {
          legend: 'none',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
          },
          vAxis: { gridlines: { count: 10 } , baseline: 10},
          hAxis: { gridlines: { count: 10 }}
        };

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

Я ищу такую ​​сетку:

enter image description here

Что мне не хватает илиздесь делаешь неправильно?

1 Ответ

0 голосов
/ 24 мая 2018

линии сетки будут присутствовать только на непрерывной оси (число, дата)
они не отображаются для дискретной оси (строка)

в этом случае, чтобы добавить линии сетки для x-ось,
используйте числовой столбец, а не строку

вы можете использовать отформатированное значение ячейки для отображения дня недели 

[{v: 1, f: 'Mon'}, 20, 28, 38, 48],

и тех же обозначений дляметки оси (галочки) 

hAxis: { ticks: [{v: 1, f: 'Mon'}, {v: 2, f: 'Tue'}, ...

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [{v: 1, f: 'Mon'}, 20, 28, 38, 48],
    [{v: 2, f: 'Tue'}, 30, 38, 55, 65],
    [{v: 3, f: 'Wed'}, 50, 55, 77, 87],
    [{v: 4, f: 'Thu'}, 50, 66, 77, 86],
    [{v: 5, f: 'Fri'}, 10, 22, 66, 82]
  ], true);

  var options = {
    legend: 'none',
    bar: { groupWidth: '100%' }, // Remove space between bars.
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
    },
    vAxis: { gridlines: { count: 5 }},
    hAxis: { ticks: [{v: 1, f: 'Mon'}, {v: 2, f: 'Tue'}, {v: 3, f: 'Wed'}, {v: 4, f: 'Thu'}, {v: 5, f: 'Fri'}]}
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...