javascript – 如何使用Google Charts API实现水平烛台？

2019年8月4日 170次阅读

我想使用Google Charts API,但他们似乎并不支持这种情况(至少是公开的).

这就是我想要复制的内容(内部报告)：screenshot

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

最佳答案 没有简单的方法可以做同样的事情,但你可以作弊并获得这样的东西(你可以根据需要进行定制以进一步微调)：

基本上,我制作了一个带有6个不同系列的堆积条形图.

>假(透明)系列
>黑线(因此错误条显示正确)
>(和4,5,6)灰色,红色,黄色,绿色的范围

虚拟系列是透明的,并设置第一个条形图出现在图表上的距离.黑线系列始终为0,并且其上的误差条从0到100(下面的间隔列).其他人代表数据.

这有点复杂,但您可以创建一个javascript函数,以便在给定单个值的情况下将数字适当地分配给各个系列.我只是放入任意值.

可以优化颜色和透明度,每个条的“高度”也可以使其看起来相似.轴基线和网格线可以隐藏,使其看起来更好.图例也可以隐藏.我没有做那些无论如何都会弄乱你的代码.

这是代码：

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'}]
           }
      );
}
点赞