基于公共值的花纹条形图颜色分类

Question

我目前有一个有城市和州列表的flot条形图，但是当条形图是基于城市列出的时候，我很难找到一种很好的方法来根据状态设置每个条形图的相同颜色。

我希望以升序的方式使用在flot自动生成的颜色中定义的相同颜色，这就是为什么我以这种方式设置数据数组的原因。但是我需要改变它，使同一州内的城市有相同的条形颜色。在这个示例http://jsfiddle.net/u8S9X/中，条形图颜色是根据数据数组自动生成的，但是从这里开始，我只能尝试找出根据每个城市的状态对颜色进行分类的最佳方法。

下面是代码的一个片段：

var data = [
    {data: [[0, 1],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 1],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 2],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 2],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 2],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 4],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 7],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 1]]}   
];

$.plot($("#placeholder"), data, {
    series: {
        lines: {
            fill: true,
        },
        bars: {
            show: true,
            align:'center',
            barWidth: 0.8,
        }   
    },
    xaxis: {
        ticks: [[0, "CITY, CO"],[1, "CITY, GA"],[2, "CITY, MO"],[3, "CITY, MO"],[4, "CITY, MS"],[5, "CITY, NJ"],[6, "CITY, NJ"],[7, "CITY, WA"]]
    },
    yaxis: {
        min: 0
    }
});

Answer 1

您需要修改数据结构，以便将相同的状态分组到每个系列中：

 var data = [
    {data: [[0, 1]]},  //CO
    {data: [[1, 1]]},  //GA
    {data: [[2, 2],[3, 2]]},  //MO
    {data: [[4, 2]]},  //MS
    {data: [[5, 4],[6, 7]]},  //NJ
    {data: [[7, 1]]}  //WA
];

这是更新的小提琴。

​

​

Answer 2

您可以为每个数据系列指定颜色，如此更新的小提琴中所示。

    {data: [[0, 0],[1, 0],[2, 2],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]], color: 'green'},

在生成数据时，您可以在服务器端设置它，或者使用javascript函数来读取标签数组。