Google Combo Chart在柱形图中添加水平和垂直线 [英] Google Combo Chart add horizontal and vertical line in column chart

问题描述

如何创建可复制以下图片的Google组合图？看来，一旦我为垂直线添加了列，绿色的列就会失去其groupWidth属性并变成细线。

 数据。 addColumn（'number'，'X'）; 
 data.addColumn（'number'，'Y'）; 
 data.addColumn（'number'，'Average'）; 
 data.addColumn（'number'，'Vertical Line'）; 
 
 data.addRows（[
 [1，5，3，null]，
 [3，4，3，null]，
 [5，2， 3，null]，
 [2，null，null，0]，//添加垂直线
 [2，null，null，5]，
]）; 
  

这是一个jsfiddle：

我必须将容器div 位置：相对使计算更容易。

主要代码如下：

  var line = document.createElement（ div）; 
 var interface = chart.getChartLayoutInterface（）; 
 var cli = chart.getChartLayoutInterface（）; 
 line.style.background =红色; 
 line.style.width = 2px; 
 line.style.position =绝对; 
 line.style.left =（interface.getXLocation（2）-1）+ px; 
 line.style.top = interface.getYLocation（5）+ px; 
 line.style.height =（interface.getYLocation（1）-interface.getYLocation（5））+ px; 
 el.appendChild（line）; 
  

所有硬编码值都可以删除，并根据您的数据源用计算或常量代替。

How do I create a Google Combo Chart that replicates the image below? It seems once I add the column for the vertical line the green columns lose their groupWidth property and turn into skinny lines.

    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn('number', 'Average');
    data.addColumn('number', 'Vertical Line');

    data.addRows([
        [1, 5, 3, null],
        [3, 4, 3, null],
        [5, 2, 3, null],
        [2, null, null, 0], // add vertical line
        [2, null, null, 5],
    ]);

Here is a jsfiddle: http://jsfiddle.net/vmb4odkt/

解决方案

The whole thing can use some cleanup especially depending on your final data, but here's a good solution I think. I used the inspection methods to find out where on the chart's div the line should go and then add a new div to draw the line over the SVG chart. You can similarly add an SVG node to the SVG element in the DOM.

http://jsfiddle.net/vmb4odkt/2/

I had to make the container div position: relative to make calculations easier.

The main code is this:

var line = document.createElement("div");
var interface = chart.getChartLayoutInterface();
var cli = chart.getChartLayoutInterface();
line.style.background = "red";
line.style.width = "2px";
line.style.position = "absolute";
line.style.left = (interface.getXLocation(2) - 1) + "px";
line.style.top = interface.getYLocation(5) + "px";
line.style.height = (interface.getYLocation(1) - interface.getYLocation(5)) + "px";
el.appendChild(line);

All of the hardcoded values can be removed and replaced with either calculations or constants depending on your data source.

这篇关于Google Combo Chart在柱形图中添加水平和垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！