Google Visualization линейчатая диаграмма: цвет и этикетки для каждого значения

Question

Я использую Google API для типа визуализации визуализации диаграммы, показывающей одну строки с несколькими значениями, как это:

со следующим кодом:

var data = google.visualization.arrayToDataTable([ 
      ['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}], 
      ['Mood', 3, 7, 20, 25, 45, ''] 
    ]); 

var options = { 
    isStacked: true, 
    hAxis: { minValue: 0 } 
} 

var chart = new google.visualization.BarChart(document.getElementById('mood_chart')); 
chart.draw(data, options); 

Теперь я хотел бы настроить цвета и добавить ярлык к каждой части строки.

Если я это сделать:

var data = google.visualization.arrayToDataTable([ 
    ['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}, {role: 'style'}], 
    ['Mood', 3, 7, 20, 25, 45, 'ABC', '#f50'] 
]); 

Тогда это относится только к последнему значению (Примечание: легенда имеет также неправильный цвет)

И если я ставлю массив строк вместо одной метки указывается ошибка.

Можно ли сделать то, что я пытаюсь сделать? Как?

Answer 1

У меня есть интерактивная демонстрация для этого ответа here.

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

Вот почему ваши цвета отличаются от ваших легенд. Чтобы применить цвета к серии, вы делаете это из своего объекта options. Роль таблицы данных стиля влияет на индивидуальное значение без изменения опции для всей серии.

var data = google.visualization.arrayToDataTable([ 
    ['', '0%', {role: 'annotation'}, '25%', {role: 'annotation'}, 
    '50%', {role: 'annotation'}, '75%', {role: 'annotation'}, 
    '100%', {role: 'annotation'}], 
    ['Mood', 3, 'ABC', 7, 'DEF', 20, 'GHI', 25, 'JKL', 25, 'MNO'] 
]); 

Для присвоения цвета вручную настройки будут выглядеть следующим образом:

var options = { 
    isStacked: true, 
    hAxis: { 
    minValue: 0 
    }, 
    series: { 
    0:{color:'#222'}, 
    1:{color:'#555'}, 
    2:{color:'#888'}, 
    3:{color:'#AAA'}, 
    4:{color:'#EEE'} 
    } 
}; 

Мои цвета были просто случайные оттенки серого, потому что я могу вычислить цвета в моей голове, что путь. Индекс серии не зависит от столбца таблицы данных, поэтому он просто присваивает индексы столбцам со значениями данных.