javascript - c3js - 使用 Chart.load() 使用颜色数组更新图表颜色

Question

有没有办法使用chart.load()根据颜色数组更新颜色？

问题是，如果我删除任何以前插入的列，然后插入另一列并“重新加载”图表，新颜色将是数组中的下一个颜色，而不是遵循真实的颜色数组序列。

例如。颜色数组为 [红、绿、蓝、白]，然后我向图表提供 3 列数据，并用红、绿和蓝线正确绘制它们，然后删除一列并重新加载图表(显示的线条颜色)是红色和绿色)，然后我插入一个包含新数据的新列，而不是用蓝色绘制这条新线(这是颜色数组中的第三个)，它最终用数组中的下一个颜色(白色)绘制.

这是我正在使用的代码:

我首先生成带有颜色数组的图表:

var colors= ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']

var chart = c3.generate({
            ....
            color: {
                pattern: colors
            }
            ....
});

然后用ajax更新图表时:(插入或删除列)

chart.load({
            columns: arr2,
            unload: true,
            done: function () {

            },

        });

arr2 是一个多维数组，用于将数据输入图表。

我尝试在这里插入:{pattern:colors}，但它不起作用。

Answer 1

因此，您尝试将颜色分配与列的索引联系起来(因为需要更好的词)，但当您删除数据时，c3 似乎永远不会减少它在模式数组上使用的索引，只会将其增加为新数据已加载，图案设置后就不能更改？

我想对于大多数情况(即除了删除最后一列之外)这是有意义的。假设您卸载了第一个数据列，您是否希望第二个和第三个数据列突然切换到图案中的第一种和第二种颜色或保留其现有颜色？我想要后者。但在这种情况下，如果模式索引确实随着卸载而递减，则新加载的列将显示为第三种颜色(已分配)，因此屏幕上将有两条具有相同颜色的行/条组。看起来越来越需要一张 map ，这导致......

如果您想替换数据并保持相同的颜色，则可以通过 data.colors(复数)( http://c3js.org/samples/api_data_color.html ) 将每种颜色绑定(bind)到特定列的 id 中。这些也可以在初始化后更改，但由于它们是按列 ID 分配的，在这种情况下您通常不需要这样做。

无论如何，简短的答案是研究了一些 c3.js 示例，不，我看不到通过 color.pattern 做你想做的事情的方法。这并不意味着其他人不知道。垃圾答案呃;-)