为每个点设置一个阈值

Question

我已经使用 C3.js 创建了一个与此非常相似的条形图，但我面临的问题是为条形图上的每个点设置一个关于 x 轴值的阈值。例如，当 GOAL 在 x 轴上为 < 10% 时，y 轴上的 10% 标记上应该有一条虚线，后续值也应该发生同样的事情，即 <3%, <2% and <1%.

我的问题是，如何创建阈值或在图表上设置标记，就像在模型上一样？提前致谢。

Answer 1

您可以使用 c3 用来绘制条形图的相同函数来确定在何处绘制目标线，就像这样

...

// where to draw the target lines for each data point
var scalingFactors = [0.1, 0.03, 0.02, 0.01]

// svg layer for each bar series
var barsLayers = chart.internal.main.selectAll('.' + c3.chart.internal.fn.CLASS.bars)[0]
var bars = chart.internal.main.selectAll('.' + c3.chart.internal.fn.CLASS.bar)[0];
// use the same function c3 uses to get each bars corners
var getPoints = chart.internal.generateGetBarPoints(chart.internal.getShapeIndices(chart.internal.isBarType));
// just in case there are multiple series
chart.internal.data.targets.forEach(function (series, i) {
    // for each point in the series
    series.values.forEach(function (d, j) {
        // highlight if over threshold
        if (d.value > scalingFactors[j])
            d3.select(bars[j]).classed('crossed', true);

        // get the position for our target lines
        var value = d.value;
        d.value = scalingFactors[j];
        var pos = getPoints(d, j);
        d.value = value;

        var posTopLeft = pos[1]
        var posTopRight = pos[2]

        // draw target lines
        d3.select(barsLayers[i]).append("line")
            .attr("x1", posTopLeft[0] - 10)
            .attr("y1", posTopLeft[1])
            .attr("x2", posTopRight[0] + 10)
            .attr("y2", posTopRight[1])
            .attr("stroke-width", 1)
            .style("stroke-dasharray", ("6, 4"));
    })
})

CSS

.crossed {
   fill: orange !important;
}

Fiddle - http://jsfiddle.net/puvhLb6x/

为每个点设置一个阈值

Set a threshold for each point

charts

d3.js

c3.js