jquery - googlecharts 中的端到端系列

Question

我想使用 googlecharts 在堆积柱形图中显示目标线(水平直线)。
我正在使用选项标签中的系列属性来完成此操作。

series : {
    4 : {
        type : "line",
        color : '#FF0000',
        visibleInLegend : false
    }
}

该行正在显示，但未从头到尾显示。我希望我的线两端都接触 y 轴。
我尝试将 type:line 更改为 type:steppedArea。该线从一端到另一端显示。但它隐藏在铁栅后面。

series : {
    4 : {
        type : "steppedArea",
        color : '#FF0000',
        visibleInLegend : false,
        areaOpacity : 0
    }
}

我在某处读到，如果 x 轴值为 numeric ，则它会正确显示。我什至尝试改变它，但没有用。

Fiddle演示

Answer 1

设置 hAxis 图表的最小值/最大值:

 viewWindow: {
    min: 0.5,
    max: 2.5
 }

然后向 dataTable 添加两个虚拟行，并将适当的 x 轴值(最小值/最大值)和 y 值设置为目标行级别(示例中为 0.67):

['Machine', '', {
        role : 'style'
    }, '', {
        role : 'style'
    }, '', {
        role : 'style'
    }, '', {
        role : 'style'
    }, ''],
[0.5, null, null, null, null, null, null, null, null, 0.067],
[1.0, 0.05, "#808080", 0.0775, "#C71585", 0.069, "#FFC0CB", 0.05, "Blue", 0.067],
[2.0, 0.05, "Yellow", 0.0775, "Pink", 0.069, "#808080", 0.05, "Green", 0.067],
[2.5, null, null, null, null, null, null, null, null, 0.067]

参见:https://jsfiddle.net/beaver71/60q2f7xw/

<小时/>

编辑:

要从第一列获取最小/最大值，请使用 getColumnRange()方法:

var min = data.getColumnRange(0).min;
var max = data.getColumnRange(0).max;