Как использовать Jqplot, чтобы показать две группы разноцветных полос на одной гистограмме
Я хочу сделать гистограмму с двумя наборами сгруппированных столбцов, которые сгруппированы вместе, чтобы сравнить две группы сгруппированных столбцов. Это должно отображаться следующим образом:
Я прошел по этой ссылке
Но это не помогло мне нарисовать что-то похожее на изображение выше. Я даже попытался отправить два набора данных, как [[s1, s2, s3], [s4, s5, s6]] Но это не помогло мне построить график. кто нибудь знает как это сделать?
Любая помощь будет оценена. Заранее спасибо.
3 ответа
Настройка опции stackSeries: true создаст нужный дисплей для гистограмм.
Официальные источники:
- jqPlot Исходный код: исходный код, версия 1.0.8r1250 от 2013-03-27. Для этого вопроса
src/jqplot.core.jsстроки 2499, 2563 и 2649. - Документация jqPlot: говорит, что документация API является наиболее точной. Вы также можете увидеть веб-страницу README.txt, optionsTutorial.txt, jqPlotOptions.txt, jqPlotOptions.txt, jqPlotCssStyling.txt, creation.txt, changes.txt в общем выпуске 1.0.8r1250.
Документация по jqPlot не актуальна, поэтому я взглянул на исходный код. К сожалению, нет возможности напрямую иметь два набора баров с гистограммой с накоплением. jqPlot.stackSeries свойство является только логическим значением. Его единственная функция - указывать jqPlot укладывать каждую серию поверх друг друга на столько столбцов, сколько есть значений в разных рядах. Каждая серия отображается по одному значению на столбец, а первая серия находится внизу. Другими словами, все [0] значения отображаются в первом баре, [1] значения во втором и т. д. Количество, показанное в строке, является суммой значения [n] для текущего ряда и всех предыдущих рядов. Невозможно указать, что существует две или более групп рядов. Возможность делать то, что нужно, просто не существует в jqPlot.
Но вы можете выполнить то, что вы хотите:
Тот факт, что jqPlot изначально не поддерживает то, что вы хотите, не означает, что вы не можете сделать это, просто нужно проявить творческий подход.
График, который вы хотите, можно рассматривать как два отдельных графика, которые были наложены друг на друга с интервалом между столбцами на отдельных графиках, оставляя достаточно места (seriesDefaults.rendererOptions.barMargin) для столбцов из другого графика, которые будут наложены рядом с ними.
Вы можете использовать jqPlot для создания: 
Этот график имеет масштаб, фон и линии сетки, которые вы хотите установить видимыми. Обратите внимание, что на графике есть дополнительная полоса. Это необходимо для обеспечения достаточного количества фона и линий сетки для последнего столбца, представленного другим графиком.
Вы также можете использовать jqPlot для создания второго графика: 
Этот график имеет масштаб и линии сетки, установленные в jqPlot, чтобы они не были видны.
seriesDefaults.axes.xaxis.tickOptions.show = false;
seriesDefaults.axes.yaxis.tickOptions.show = false;
etc.
Фон настроен на transparent, Обратите внимание, что вам нужно сместить положение этого графика немного вправо при позиционировании <div> относительно первого графика.
С обложкой вы получите: 
Затем вы используете бланк <div> с тем же цветом фона, что и цвет фона вашей веб-страницы, и наложите его так, чтобы он покрывал дополнительную полосу на первом графике, но оставляя достаточное количество фона и линий сетки первого графика, чтобы немного выйти за последний столб второго графика.
В итоге вы получите:
Вы можете увидеть рабочее решение на JSFiddle, используя jqPlot 1.0.8r1250.
Сравнивая исходный запрос с окончательной версией графика, созданного с помощью этого метода, вы можете увидеть, что они очень близки: 
Между этими двумя наиболее заметным различием является большее пространство между осью Y в версии jqPlot. К сожалению, кажется, что нет возможности уменьшить эту сумму для гистограмм с накоплением.
Обратите внимание, что отсутствие границы справа от графика, который создает этот код, является преднамеренным, поскольку его не существовало в исходном запросе. Лично я предпочитаю иметь границу на правой стороне графика. Если вы немного измените CSS, это легко получить: моя предпочтительная версия графика включает границу слева и уравновешивает пробел: 
Вы можете увидеть работающий JSFiddle этой версии.
В общем, это не так сложно. Конечно, было бы проще, если бы jqPlot поддерживал несколько наборов баров. Надеюсь, это будет в какой-то момент. Тем не менее, последний выпуск был 2013-03-27, и после этого времени не было никаких разработок. До этого были релизы каждые несколько месяцев. Но jqPlot выпущен под лицензиями GPL и MIT, так что любой может продолжить работу.
$(document).ready(function () {
//Numbers derived from desired image
//var s1 = [10, 29, 35, 48, 0];
//var s2 = [34, 24, 15, 20, 0];
//var s3 = [18, 19, 26, 52, 0];
//Scale to get 30 max on plot
var s1 = [2, 5.8, 7, 9.6, 0];
var s2 = [6.8, 4.8, 3, 4, 0];
var s3 = [13.6, 8.8, 3, 7.8, 0];
plot4 = $.jqplot('chart4', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesColors: ["#1B95D9", "#A5BC4E", "#E48701"],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// jqPlot does not actually obey these except barWidth.
barPadding: 0,
barMargin: 66,
barWidth: 38,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: false
},
title: {
text: '', // title for the plot,
show: false,
},
markerOptions: {
show: false, // wether to show data point markers.
},
pointLabels: {
show: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: false
},
lastPropertyConvenience: 0
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
shadow: false, // no shadow
borderWidth: 1,
background: 'white', // CSS color spec for background color of grid.
lastPropertyConvenience: 0
},
lastPropertyConvenience: 0
});
});
$(document).ready(function () {
//Numbers derived from desired image
//var s1 = [10, 29, 35, 48, 0];
//var s2 = [34, 24, 15, 20, 0];
//var s3 = [18, 19, 26, 52, 0];
//Scale to get 30 max on plot
var s1 = [2, 5.8, 7, 9.6, 0];
var s2 = [6.8, 4.8, 3, 4, 0];
var s3 = [3.6, 3.8, 5.2, 10.4, 0];
plot4 = $.jqplot('chart5', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesColors: ["#754DE9", "#666666", "#000000"],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// jqPlot does not obey these options except barWidth.
show: true,
barPadding: 0,
barMargin: 66,
barWidth: 38,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: false
},
title: {
text: '', // title for the plot,
show: false,
},
markerOptions: {
show: false, // wether to show data point markers.
},
pointLabels: {
show: false
}
},
axesDefaults: {
//show: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: false
},
lastPropertyConvenience: 0
},
yaxis: {
show: false,
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
tickOptions: {
show: false
},
}
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid: {
drawGridLines: false, // wether to draw lines across the grid or not.
shadow: false, // no shadow
borderWidth: 10,
background: 'transparent', // CSS color for background color of grid.
gridLineColor: 'transparent', // *Color of the grid lines.
borderColor: 'transparent', // CSS color for border around grid.
lastPropertyConvenience: 0
},
lastPropertyConvenience: 0
});
});#cover1 {
padding:0;
margin: 0;
background-color: white;
left: 451px;
width: 88px;
/* Uncomment the next three lines to have a border on the right of the graph and
balanced whitespace:*/
/*
border-left: 2px solid #CCCCCC;
left:476px;
width: 62px;
*/
}
#chart4 .jqplot-xaxis-tick {
visibility: hidden;
}
#chart5 .jqplot-xaxis-tick {
visibility: hidden;
}
#chart4 .jqplot-yaxis-tick {
font: 9px arial
}<link class="include" rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Main jqPlot -->
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<!-- Additional jqPlot plugins -->
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<div style="position:absolute; left:10px; top:10px;">
<div id="chart4" style="width:548px; height:185px;"></div>
<div id="chart5" style="width:536px; height:185px; top:-185px; left:53px;"></div>
<div id="cover1" style="position: relative; height: 152px; top:-361px;"></div>
</div>Приведенный выше код основан на том, что на странице примера, указанной в вопросе.
Практическое решение...
$(document).ready(function(){
var s1 = [2, 0, 0, 10,11,0, 6, 2, 0,10,11];
var s2 = [7, 0, 0, 4,11,0, 6, 2, 0,10,11];
var s3 = [4, 0, 0, 7,11,0, 6, 2, 0,10,11];
var s4 = [0, 20, 0, 0,0,0, 0, 0, 0,0,0];
plot3 = $.jqplot('chart3', [s1, s2, s3,s4], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barMargin: 30,
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Образ: 