您如何使用Google Charts API实施横向烛台？ [英] How do you implement horizontal candlesticks using the Google Charts API?

问题描述

我想使用Google Charts API，但似乎不支持（至少是公开的）。

这就是我想要的喜欢复制（内部报告）：截图

编辑：这是我发现的最接近的东西： https ：//developers.google.com/chart/interactive/docs/reference#barformatter

解决方案

没有简单的方法来做同样的事情，但你可以作弊一些并得到像这样的东西（你可以根据需要进行自定义，以便进一步微调）：

基本上，我制作了一张6个不同的堆叠条形图系列。

1. 虚拟（透明）系列


2. 黑色线条


3. （和4,5,6）灰色，红色，黄色，绿色用于范围
   

Dummy系列是透明，并设置第一栏出现在图表上的距离。黑线系列始终为0，并且其上的误差线从0到100（下面的间隔列）。其他人代表数据。

手工操作有点复杂，但您可以创建一个javascript函数，以便将数字适当地分配给各个系列值。我只是输入任意值。

可以优化颜色和透明度，每个栏的高度可以使其看起来相似。轴基线和网格线可以隐藏起来，使其看起来更好。图例也可以隐藏。

以下是代码：

<$>

p $ p> 函数drawVisualization（）{
//创建并填充数据表。
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Label'）;
data.addColumn（'number'，'Dummy'）;
data.addColumn（'number'，'Black for Lines'）;
data.addColumn（{type：'number'，role：'interval'}）;
data.addColumn（{type：'number'，role：'interval'}）;
data.addColumn（'number'，'Gray'）;
data.addColumn（'number'，'Red'）;
data.addColumn（'number'，'Yellow'）;
data.addColumn（'number'，'Green'）;
data.addRows（[
['Target'，65，0，100，15，00，00，00]，
['Test A'，85，0，0 ，$ 100，00，00，15]，
['Test B'，70,0,0,100,10,00,05,00]，
['Test C'，10 ，0，0，100，00，15，00，00]，
]）;

//创建并绘制可视化文件。
new google.visualization.BarChart（document.getElementById（'visualization'））。
draw（data，
{isStacked：true，
width：600，height：400，
series：[{color：'transparent'}，{color：'black' }，{color：'gray'}，{color：'red'}，{color：'yellow'}，{color：'green'}]
}
）;
}


I'd like to use the Google Charts API, but they don't seem to support this (at least publicly).

This is what I'd like to replicate (for an internal report): screenshot

Edit: This is the closest thing that I've found: https://developers.google.com/chart/interactive/docs/reference#barformatter

解决方案

There is no easy way to do exactly the same thing, but you can cheat a bit and get something like this (you can customize as needed for further fine tuning):

Basically, I make a stacked bar chart with 6 different series.

1. Dummy (transparent) series
2. Black Lines (so the error bars appear properly)
3. (and 4, 5, 6) Grey, Red, Yellow, Green for the ranges

The Dummy series is transparent, and sets how far up the chart the first bar appears. The black lines series is always 0, and has error bars on it that go from 0 to 100 (the interval columns below). The others represent the data.

This is a bit complex to do by hand, but you can create a javascript function to appropriately distribute the numbers to the various series given a single value. I just put in arbitrary values.

Colors and transparency can be optimized, as can the 'height' of each bar to make it look similar. The axes base lines, and the grid lines can be hidden to make it look better. The legend can also be hidden. I didn't do those figuring you'll fiddle with the code anyhow.

Here is the code:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Black for Lines');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Grey');
  data.addColumn('number', 'Red');
  data.addColumn('number', 'Yellow');
  data.addColumn('number', 'Green');
  data.addRows([
    ['Target', 65, 0, 0, 100, 15, 00, 00, 00],
    ['Test A', 85, 0, 0, 100, 00, 00, 00, 15],
    ['Test B', 70, 0, 0, 100, 10, 00, 05, 00],
    ['Test C', 10, 0, 0, 100, 00, 15, 00, 00],
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {isStacked: true,           
            width:600, height:400,
            series: [{color: 'transparent'}, {color: 'black'}, {color: 'grey'}, {color: 'red'}, {color: 'yellow'}, {color: 'green'}]
           }
      );
}

这篇关于您如何使用Google Charts API实施横向烛台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！