0

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

我想以升序方式使用在 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
    }
});
4

2 回答 2

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

这是更新的小提琴。

在此处输入图像描述

于 2013-10-01T12:43:07.383 回答
0

您可以像在这个更新的小提琴中一样为每个数据系列指定颜色：

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

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

于 2013-10-01T09:54:00.290 回答