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 图表设置 min/max：

 viewWindow: {
    min: 0.5,
    max: 2.5
 }

然后将两个虚拟行添加到数据表中，并使用适当的 x 轴值 (min/max) 并将 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/

编辑：

要从第一列中获取 min/max 个值，请使用 getColumnRange() 方法：

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

googlecharts 中的端到端系列

End to end series in googlecharts

jquery

series

google-visualization