Как реализовать горизонтальные подсвечники с помощью API графиков Google?

Question

Я хотел бы использовать API графиков Google, но они, похоже, не поддерживают это (по крайней мере, публично).

Это то, что я хотел бы повторить (для внутреннего отчета): screenshot

Edit: Это ближе всего, что я нашел: https://developers.google.com/chart/interactive/docs/reference#barformatter

Answer 1

Там нет простого способа сделать точно то же самое, но вы можете обмануть немного и получить что-то вроде этого (вы можете настроить по мере необходимости для дальнейшей тонкой настройки):

в принципе, я делаю многослойную б ар диаграммы с 6 различными сериями.

1. пустышка (прозрачные) серии
2. черных линии (так столбики ошибок отображаются должным образом)
3. (и 4, 5, 6) серый, красный, желтый, зеленый для диапазонов

Серия Dummy прозрачна и устанавливает, насколько далеко на диаграмме отображается первый столбец. Серия черных строк всегда равна 0, и на ней есть полосы ошибок от 0 до 100 (интервальные столбцы ниже). Другие представляют данные.

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

Цвета и прозрачность можно оптимизировать, так же как и «высота» каждого бара, чтобы он выглядел похожим. Осевые базовые линии и линии сетки могут быть скрыты, чтобы они выглядели лучше. Легенда также может быть скрыта. Я не делал этого, полагая, что вы все равно будете возиться с кодом.

Вот код:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Label'); 
    data.addColumn('number', 'Dummy'); 
    data.addColumn('number', 'Black for Lines'); 
    data.addColumn({type: 'number', role: 'interval'}); 
    data.addColumn({type: 'number', role: 'interval'}); 
    data.addColumn('number', 'Grey'); 
    data.addColumn('number', 'Red'); 
    data.addColumn('number', 'Yellow'); 
    data.addColumn('number', 'Green'); 
    data.addRows([ 
    ['Target', 65, 0, 0, 100, 15, 00, 00, 00], 
    ['Test A', 85, 0, 0, 100, 00, 00, 00, 15], 
    ['Test B', 70, 0, 0, 100, 10, 00, 05, 00], 
    ['Test C', 10, 0, 0, 100, 00, 15, 00, 00], 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {isStacked: true,   
      width:600, height:400, 
      series: [{color: 'transparent'}, {color: 'black'}, {color: 'grey'}, {color: 'red'}, {color: 'yellow'}, {color: 'green'}] 
      } 
    ); 
}