如何基于数值区间为C3.js时间序列图表着色？

问题 #

刚接触C3.js库，需要绘制时间序列图表，并根据数值区间为数据着色。数据通过PHP查询后以JSON形式获取，已将日期和值分别存入数组，当前绘制图表的代码如下。

JSON数据示例：

• 日期数组：['x', '2022-05-01', '2022-05-02', ..., '2022-05-21']
• 数值数组：['Values', '0.0249', '0.0163', ..., '0.0011']

需求：按以下区间为数据着色：

• 值小于0.3为绿色
• 0.3到0.6之间为黄色
• 大于0.6为红色

曾尝试在PHP中创建3组日期和数值数组，但无法在图表中正确展示（单个日期对应多个值不符合数据唯一性），请问如何实现按区间着色？

当前图表代码：

let xData = (data.date);
let yData = (data.value);

xData.unshift('x');
yData.unshift('Values');
var chart7 = c3.generate({
    bindto: '#chart7',
    data: {
        x:'x',
        xFormat: '%Y-%m-%d',
        columns:[xData,yData],
        type: 'bar'
    },
    axis: {
        x:{label:{text:'Date',position:'outer-center'},type: 'timeseries',tick:{format: '%Y-%m-%d'}}
    },
    point: {show: true},
    zoom: {enabled: true},
    legend: {show: false},
    color: {pattern: ['#b7b485', '#0E6A40', '#B73540', '#B73540']},
    padding: {top:5,right:5,bottom:5,left:30},
    size:{height:240}
});

解决方案 #

不用拆分数据数组，直接利用C3.js的color配置项中的函数回调，根据每个数据点的数值动态返回对应颜色即可，具体修改如下：

修改后的完整代码 #

let xData = data.date;
let yData = data.value;

xData.unshift('x');
yData.unshift('Values');
var chart7 = c3.generate({
    bindto: '#chart7',
    data: {
        x:'x',
        xFormat: '%Y-%m-%d',
        columns:[xData,yData],
        type: 'bar'
    },
    axis: {
        x:{label:{text:'Date',position:'outer-center'},type: 'timeseries',tick:{format: '%Y-%m-%d'}}
    },
    point: {show: true},
    zoom: {enabled: true},
    legend: {show: false},
    // 核心逻辑：通过函数动态匹配颜色
    color: function (color, d) {
        // 将字符串类型的数值转为数字
        const value = parseFloat(d.value);
        if (value < 0.3) {
            return '#0E6A40'; // 绿色
        } else if (value >= 0.3 && value <= 0.6) {
            return '#b7b485'; // 黄色
        } else {
            return '#B73540'; // 红色
        }
    },
    padding: {top:5,right:5,bottom:5,left:30},
    size:{height:240}
});

关键说明 #

• color函数的第二个参数d包含当前数据点的完整信息，d.value即为当前点的数值（注意原始数据是字符串类型，需转为数字后再做区间判断）
• 无需拆分原数据结构，保持每个日期对应唯一值的状态，避免数据冗余和图表展示异常
• 可直接调整颜色代码或区间阈值来适配需求

内容的提问来源于stack exchange，提问作者user68481