2013-10-01 2 views
0

В настоящее время у меня есть гистограмма, содержащая список городов и штатов, но мне трудно найти хороший метод для установки одного и того же цвета каждого бара на основе состояние, когда гистограмма отображается в зависимости от города.категорирование цветной гистограммы цветной на основе общих значений

Я хотел бы использовать те же цвета, которые определены в цветовых автогенерированных цветах по возрастанию, поэтому я задал массив данных таким образом. Но мне нужно изменить его так, чтобы города в одном и том же состоянии имели одинаковый цвет. В этом примере 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 
    } 
}); 

ответ

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.

enter image description here

+0

Большое спасибо за это. Я думаю, мои мысли были перевернуты –

0

Вы можете указать цвет для каждой серии данных, как в этом обновленном fiddle:

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

Вы можете установить это на стороне сервера при генерации данных или с помощью функции javascript, которая считывает массив меток.

Смежные вопросы