Как разместить несколько баров в гистограмме jqplot

У меня есть гистограмма, которая выполняется с использованием jqplot, теперь я хочу иметь 3 бара на каждой точке оси x. Как это можно сделать? пожалуйста, проверьте это изображение http://peltiertech.com/Utility/pix/clusterstackchart.png Как разместить несколько баров в гистограмме jqplot

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 

<div id="chat3" style="height:400px;width:300px; "></div> 
<script type="text/javascript" src="plugins/jquery.js"></script> 
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script> 


<script type="text/javascript"> 

$(document).ready(function(){ 
var s1 = [2, 6, 7, 10]; 
var s2 = [7, 5, 3, 4]; 
var s3 = [14, 9, 3, 8]; 
plot3 = $.jqplot('chart3', [s1, s2, s3], { 
    // Tell the plot to stack the bars. 
stackSeries: true, 
captureRightClick: true, 
seriesDefaults:{ 
renderer:$.jqplot.BarRenderer, 
rendererOptions: { 
      // Put a 30 pixel margin between bars. 
barMargin: 30, 
      // Highlight bars when mouse button pressed. 
      // Disables default highlighting on mouse over. 
highlightMouseDown: true 
}, 
pointLabels: {show: true} 
}, 
axes: { 
xaxis: { 
renderer: $.jqplot.CategoryAxisRenderer 
}, 
yaxis: { 
padMin: 0 
} 
}, 
legend: { 
show: true, 
location: 'e', 
placement: 'outside' 
}  
}); 
    // Bind a listener to the "jqplotDataClick" event. Here, simply change 
    // the text of the info3 element to show what series and ponit were 
    // clicked along with the data for that point. 
$('#chart3').bind('jqplotDataClick', 
function (ev, seriesIndex, pointIndex, data) { 
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
} 
); 
}); 


</script> 


</body> 
</html>

источник

2013-06-12 user2470723

У меня есть это решение. Но можно предоставить через несколько часов –

нормально, но как можно скорее ... используя приведенный выше код, он просто дает один бар в одной точке по оси x. Мне нужно 3 бара в одной точке оси х ... проверьте моя ссылка на изображение. – user2470723

Дубликат http://stackoverflow.com/questions/9270945/jqplot-side-by-side-stacked-bar-chart – foobarbecue

    var s1 = [ 1, 2, 2, 3 ]; 
        var s2 = [ 12, 32, 3, 12 ]; 
        var s3 = [ 12, 32, 54, 64 ]; 
        var ticks = [ 'Section1', 'section2', 'section3', 
          'section4' ]; 

        plot2 = $.jqplot('chart3', [ s1, s2, s3 ], { 
         animate : !$.jqplot.use_excanvas, 
         seriesDefaults : { 
          renderer : $.jqplot.BarRenderer, 
          pointLabels : { 
           show : true 
          }, 
          rendererOptions : { 
           barPadding : 8, // number of pixels between 
           // adjacent bars in the same 
           // group (same category or bin). 
           barMargin : 25, // number of pixels between 
           // adjacent groups of bars. 
           barDirection : 'vertical', // vertical or 
           // horizontal. 
           barWidth : 20, // width of the bars. null to 
          // calculate automatically. 

          } 
         }, 
         series : [ { 
          label : 'X axis 1' 
         }, { 
          label : 'X axis 2' 
         }, { 
          label : 'X axis 3' 
         }, ], 
         seriesColors : [ "#efa229", "#245779", "#4BB2C5" ], 
         axesDefaults : { 
          base : 10, // the logarithmic base. 
          tickDistribution : 'even', // 'even' or 'power'. 
         // 'even' will produce 
         // with even visiual 
         // (pixel) 
         // spacing on the axis. 'power' will produce ticks 
         // spaced by 
         // increasing powers of the log base. 
         }, 
         axesDefaults : { 
          tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
          tickOptions : { 

           fontSize : '7pt' 
          } 
         }, 
         axes : { 
          xaxis : { 
           renderer : $.jqplot.CategoryAxisRenderer, 
           ticks : ticks 
          }, 
          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 
          } 
         }, 
         tickOptions : { 

          fontSize : '7pt' 
         }, 
         legend : { 
          show : true, 
          location : 'ne', // compass direction, nw, n, ne, 
          // e, se, s, sw, w. 
          xoffset : 12, // pixel offset of the legend box 
          // from the x (or x2) axis. 
          yoffset : 12, // pixel offset of the legend box 
          // from the y (or y2) axis. 
          placement : 'outside' 
         }, 
         cursor : { 
          show : false, 

          showTooltip : true, 
          tooltipLocation : 'ne', 

         }, 
         grid : { 
          background : 'white' 
         } 
        });

выше код, который я реализовал для показа 3 бара в каждом х point..hope вы найдете это полезные

Ниже приводятся ПОЛЕЗНЫЕ JS и CSS файл

jquery.jqplot.min.css"

jquery.jqplot.min.js 
jqplot.highlighter.min.js 
jqplot.barRenderer.min.js 
jqplot.categoryAxisRenderer.min.js 
jqplot.pointLabels.min.js"></script> 
jqplot.cursor.min.js 
jqplot.dateAxisRenderer.min.js 
jqplot.canvasTextRenderer.min.js 
jqplot.canvasAxisTickRenderer.min.js

источник

2013-06-12 08:54:21

ждать, когда я использую его и дам вам знать. Это так или иначе ... есть одна надежда – user2470723

и одно сомнение. какой js-файл я должен импортировать в свой html-файл? – user2470723

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

Как разместить несколько баров в гистограмме jqplot

ответ

Смежные вопросы