javascript - Google Combo Chart add horizontal and vertical line in column chart - Stack Overflow

admin管理员组

文章数量:1332383

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: /

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/vmb4odkt/

• javascript
• charts
• google-visualization

Share Follow asked Apr 2, 2015 at 18:59 wwwuserwwwuser 6,3721010 gold badges5757 silver badges6565 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +100

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/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.

本文标签： javascriptGoogle Combo Chart add horizontal and vertical line in column chartStack Overflow