代码之家 › 专栏 › 技术社区 › Larry Martell

谷歌烛台图表上的竖线

candlestick-chart google-visualization charts

Larry Martell · 技术社区 · 7 年前

我正在尝试在我的谷歌烛台图表中添加垂直条,但它似乎不起作用。请参见: 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);
      }

我在找这样的网格:

我在这里遗漏了什么或者做错了什么?

1 回复 | 直到 7 年前

WhiteHat 7 年前

网格线只能出现在连续轴上(数字、日期)
它们不会出现在离散轴(字符串)上。

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

推荐文章

cmill · Google Visualization第1行不显示。使用时使用ColorFormat()。setProperty()

7 年前

Paul Chris Jones · 在google中包含字符串列。可视化。数据组

7 年前

yash041 · google charts图形设置图例值和相同颜色列

7 年前

I am the Most Stupid Person · 谷歌图表图例位置顶部不工作

7 年前

coolhand · 通过ASP循环。使用Google图表时的NET模型数据

7 年前

ndd · Google ChartWrapper不适用于直方图

7 年前

Nabeel · 显示一些点的Google散点图工具提示

7 年前

fab · Google Charts API:在折线图中显示数据点值

7 年前

StefanN · Google散点图复制相同的域(x轴)值

7 年前

Babasaheb Dhodad Nicholas J. Markkula · 如何将导出csv选项设置为google可视化饼图中的按钮

7 年前