如何根据 C3.js/D3.js 图表中的阈值更改线条颜色？

【问题标题】：How to change color of line according to threshold values in C3.js/D3.js charts?如何根据 C3.js/D3.js 图表中的阈值更改线条颜色？
【发布时间】：2019-12-10 14:43:58
【问题描述】：

我有一个实际值数组，它应该只是一行，而一个阈值数组应该是第二行。当实际值线穿过阈值线时，这部分线的颜色应该改变。

var chart = c3.generate({
    point: {
        r: 5
    },
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04'],
            ['actual value', 230, 120, 300, 50],
            ['threshold', 130, 280, 100, 250],
        ],
        type: 'spline',
        regions: {
            'threshold': [{'style': 'dashed'}]
        },
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

【问题讨论】：

您能否更具体地谈谈您的问题？您是否期望在越过“阈值”线时改变线“实际值”的颜色？

标签： javascript d3.js charts line c3.js

【解决方案1】：

我不确定在c3 中是如何完成的，但正如你在问题中提到的d3，你会在d3 中使用threshold scale。

见this example from blocks:

var colorThresholdScale = d3.scaleThreshold()
  .domain([0.11, 0.22, 0.33, 0.50])
  .range(["#fee5d9", "#fcae91", "#fb6a4a", "#de2d26", "#a50f15"]);

阈值范围内的范围总是比域多一个值。

如果给定值小于域中的第一个值，则输出范围中的第一个值：

colorThresholdScale(0.02); // "#fee5d9"

如果输入值大于域中的nth值，并且小于域中的n + 1th值，则n +输出范围内的第 1 个值：

colorThresholdScale(0.25); // "#fb6a4a"

如果输入值大于域中的最后一个值，则输出该域中的最后一个值：

colorThresholdScale(0.6); // "#a50f15"

【讨论】：