Nvd3 / d3.js одна гистограмма поверх другой
У меня есть две серии, максимальная и средняя, каждая из которых содержит значение для всех дней месяца. В нашем программном обеспечении для настольных ПК мы отображали их на гистограмме, где средний ряд накладывается на максимальный ряд. Поскольку среднее значение никогда не может быть больше максимума, нет проблем со скрытыми полосами.
В NVD3 я нашел только варианты группировки или складывания полос. Группировка занимает слишком много места. При наложении на другую сторону будут отображаться неправильные значения для верхних полос. Только если обе полосы начинаются с нижней оси, их фактические значения могут быть считаны с оси y.
Можно ли это каким-либо образом сделать в NVD3?
Если не непосредственно в NVD3, можно ли это сделать путем доступа к базовым объектам d3?
Ответы 1
Это один из способов сделать это. Вы можете использовать multibarChart и включить только опцию стека и отключить элементы управления, которые отображаются по умолчанию.
По моему личному мнению, я бы посоветовал использовать собственный D3 в зависимости от того, чего вы пытаетесь достичь.
var chart = nv.models.multiBarChart().stacked(true).showControls(false);
d3.select('#chart svg').datum([
{
key: "Avg",
color: "#51A351",
values:
[
{ x : "Jan 1", y : 40 },
{ x : "Jan 2", y : 30 },
]
},
{
key: "Max",
color: "#BD362F",
values:
[
{ x : "Jan 1", y : 12 },
{ x : "Jan 2", y : 8 },
]
}
]).transition().duration(500).call(chart);<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<div id = "chart" style = "height: 200px;"><svg></svg></div>Я пытался заставить его работать, вычитая среднее значение из максимума перед его отображением, но затем всплывающие подсказки отображают неправильное значение.
@NicolasR, есть способ иметь собственный рендерер для всплывающей подсказки, см. Здесь - stackoverflow.com/questions/12416508/…. Кроме того, как я уже сказал, NVD3 не так гибок, как другие оболочки / фреймворки на основе d3 и нативные. Так что решение должно быть «взломанным».
хорошо, в сочетании с настраиваемой всплывающей подсказкой он должен работать. На самом деле я готов перейти на чистый d3, но для первых предварительных версий я подумал, что было бы неплохо использовать nvd3.
Спасибо, но я не понимаю, как это решает проблему. Во-первых, в данных вашего примера упускается тот факт, что максимум всегда выше среднего. Но на самом деле проблема в том, что максимум для 1 января, например, отображается как 52 вместо 12, потому что столбцы уложены друг на друга. Я хочу, чтобы они были наложены, чтобы каждое значение столбца можно было правильно считывать с оси y.