Flot:整个屏幕上的标签颜色一致,带有多个堆积条形图

时间:2021-12-02 20:06:52

Here's my JSFIDDLE

这是我的JSFIDDLE

I need the dynamic labels to have the same color if the same label is found in another chart, and if possible to have the same order in the stack bar, throughout all charts.

e.g if you look at the color purple it has 3 labels against it: 084, 080, 00. It should be only 084/080/00 against purple. These should reflect throughout all charts within a screen.

如果在另一个图表中找到相同的标签,我需要动态标签具有相同的颜色,并且如果可能的话,在所有图表中,如果可能在堆栈栏中具有相同的顺序。例如,如果你看紫色它有3个标签:084,080,00.对紫色应该只有084/080/00。这些应反映在屏幕中的所有图表中。

$.plot($("#placeholder"), chartData, chartOptions);

1 个解决方案

#1


1  

You can build a list of labels and used colors by looping through your chartData arrays, see this fiddle for a working example:

您可以通过循环遍历chartData数组来构建标签列表和使用的颜色,请参阅此小提琴以获取工作示例:

var colors = {
    _count: 1
};
function distributeColors(data) {
    for (var i = 0; i < data.length; i++) {
        var label = data[i].label;
        if (!colors[label]) {
            colors[label] = colors._count++;
        }
        data[i].color = colors[label];
    }
}
distributeColors(chartData);
distributeColors(chartData2);
distributeColors(chartData3);

#1


1  

You can build a list of labels and used colors by looping through your chartData arrays, see this fiddle for a working example:

您可以通过循环遍历chartData数组来构建标签列表和使用的颜色,请参阅此小提琴以获取工作示例:

var colors = {
    _count: 1
};
function distributeColors(data) {
    for (var i = 0; i < data.length; i++) {
        var label = data[i].label;
        if (!colors[label]) {
            colors[label] = colors._count++;
        }
        data[i].color = colors[label];
    }
}
distributeColors(chartData);
distributeColors(chartData2);
distributeColors(chartData3);