根据常用值对flot条形图颜色进行分类

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
];

这是更新的fiddle。

Answer 2

您可以为此更新的fiddle中指定每个数据系列的颜色：

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

您可以在生成数据时使用服务器端设置此项，也可以使用读取标签数组的javascript函数进行设置。