Question

我一直在尝试在量规图表（c3js）上动态更新colors.threshold值，但是显然没有办法通过API进行此操作。有人知道怎么做吗？

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

这是尝试进行沙箱测试的地方：

Codepen：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]]
    });  
}

我希望可以根据随机最大值重新计算color.threshold值。

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

其次，看来量规使用内部的levelColor函数来选择颜色，而不是常规颜色函数-> 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);

将它们放在一起，便可以使用图表了（您的Codepen的非随机版本-> https://codepen.io/anon/pen/OeJvjj）。这里35变成红色，以前是橙色。

C3JS-有什么方法可以在量规图表上动态更新color.threshold值？

1 个答案: