Гистограмма (Google Charts) с вертикальным или точечным маркером

Question

Я начинаю работать с визуализациями и использую Google Chart, я пытаюсь создать гистограмму

https://developers.google.com/chart/interactive/docs/gallery/barchart

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

Так кто-нибудь из вас знает, как сделать такую ​​гистограмму с помощью маркера?

Отредактировано: график должен выглядеть примерно так:

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1

Однако не как изображение, а как способность взаимодействовать с объектом, как это можно сделать с помощью визуализации гистограммы.

Большое спасибо,

Answer 1

Вам может не понравиться этот ответ, потому что он не предлагает решения, использующего Google-чарты, но если вы потерпите меня на секунду, вы можете найти это полезным или, по крайней мере, информативным. В любом случае, чистые HTML и CSS графические решения не дадут возможности для многих продвинутых визуализаций, но я придерживаюсь мнения - основываясь на реальном опыте - что вы можете многое сделать с помощью только CSS и HTML в отношении гистограмм, Я рекомендую прочитать статью Уилсона Майнера в "Обособленном списке" под названием " Доступная визуализация данных с помощью веб-стандартов".

Затем рассмотрите следующие быстрые и грязные CSS/HTML-графики в этой скрипке, которые имитируют диаграмму, которую вы хотите реализовать.

http://jsfiddle.net/9mJzd/

Я вставлю здесь просто фрагмент кода Баров. Вам также нужно будет просмотреть CSS в скрипке.

<td>
    <div class="BarWrap">
       <div class="BarBar" style="width: 100%;" title="Ty Cabbage: .426"></div>
       <div class="BarAvg" style="left: 62%" title="League Average: .278"></div>
    </div>
</td>

Просто добавьте jQuery и плагин всплывающей подсказки (например, всплывающую подсказку пользовательского интерфейса jQuery), и вы начали добавлять интерактивность на гистограмму.