【问题标题】:c3js - Update chart colors with color array using chart.load()c3js - 使用 chart.load() 使用颜色数组更新图表颜色
【发布时间】:2016-03-21 19:20:15
【问题描述】:

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

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

例如。颜色数组是 [red,green,blue,white],然后我为图表提供 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 } 但它不起作用。

【问题讨论】:

    标签: javascript charts c3.js


    【解决方案1】:

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

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

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

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

    【讨论】:

    • 好吧,我做了,但似乎没有什么能满足我的需要,特别是因为我的专栏的 ids/names 是动态生成的。无论如何感谢您的回答!
    • 编辑。也许如果有一种方法可以在不知道列 ID 的情况下遍历 chart.data.colors() 中的列
    • 你的意思是像这样的小提琴吗? --> jsfiddle.net/qer2r5pv/1 。它基于列顺序和现有模式数组构造数据颜色。我只是认为它会很脆弱(例如,尝试删除 data1)
    • 是的,完全正确!谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-25
    • 2016-03-05
    • 1970-01-01
    • 1970-01-01
    • 2017-10-05
    相关资源
    最近更新 更多