Question

我正在尝试将Verticle栏添加到我的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);
      }

我正在寻找这样的网格：

我在这里缺少什么或做错了什么？

Answer 1

网格线仅出现在连续轴（数字，日期）上它们不会出现在离散轴（字符串）

在这种情况下，要为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>

Google烛台图表上的竖条

1 个答案: