C3JS - 有没有办法在仪表图上动态更新颜色阈值?

Question

>我一直在尝试在仪表图(c3js)上动态更新colors.threshold值，但显然无法通过API做到这一点。有人知道怎么做吗？

我尝试将阈值直接更新到图表对象实例中，但没有任何结果。

这是尝试的沙盒：

代码笔：https://codepen.io/felipevega/pen/WBaQKP

function updateChart() {
var randomValue = Math.round((Math.random(100)*100));
var randomMaxValue = 100 + Math.round((Math.random(100)*100));
chart.internal.config.gauge_max = randomMaxValue;
//HERE'S the issue > this is not updating the threshold values
chart.internal.config.color_threshold = [
Math.round(randomMaxValue/4), 
Math.round(randomMaxValue/3), 
Math.round(randomMaxValue/2), 
randomMaxValue 
];
chart.load({
columns: [['Speed', randomValue]]
});  
}

我希望可以根据随机最大值重新计算颜色阈值。

Answer 1

你需要两样东西。

首先，将新的阈值数组包装在"values"属性中，就像在配置中一样，否则 c3 的代码不会选取新值：

chart.internal.config.color_threshold = {values: [
Math.round(randomMaxValue/4), 
Math.round(randomMaxValue/3), 
Math.round(randomMaxValue/2), 
randomMaxValue 
]};

请参阅代码 https://github.com/c3js/c3/blob/ca9fd2b26ef8c2234bb3045589ffe31c625b101a/src/color.js#L31

其次，仪表似乎使用内部水平颜色函数而不是正常的颜色函数来选择颜色--> https://github.com/c3js/c3/blob/ca9fd2b26ef8c2234bb3045589ffe31c625b101a/src/arc.js#L452

这需要通过 generateLevelColor 函数 (https://github.com/c3js/c3/blob/94cbc06150975cf071b75b9deeec8a6ed27d4484/src/core.js#L95) 重新生成。这反过来需要使用 chart.internal 作为上下文进行调用，以便它可以访问内部值。

所以：

chart.internal.levelColor = chart.internal.generateLevelColor.call (chart.internal);

将它们放在一起，图表现在可以工作了(此处为非随机版本的代码笔 --> https://codepen.io/anon/pen/OeJvjj)。这里的 35 变为红色，以前应该是橙色的。