Групповой бар Char в D3.js или Google Chart или Chart.js

Question

Как создать сгруппированную гистограмму, как показано на рисунке ниже, в любой из систем построения графиков, таких как D3, Google Chart или Chart.js.

Любая помощь будет принята с благодарностью!

Answer 1

Вы можете использовать d3.js для создания этой группы гистограмм.

Вы можете посмотреть на this, где вы можете найти, как создать сгруппированную гистограмму. Надеюсь, это поможет.

Answer 2

Я его создал. не похоже, но гораздо ближе к требованию.

var datastring="Grade,Your School,Other School\nAcross Grades,10345,8345\nGrade 1,2000,1234\nGrade 2,2345,2600\nGrade 3,4230,1234\nGrade 4,1002,2456\nGrade 5,2034,234\nGrade 6,234,2678\nGrade 7,2434,3000\nGrade 8,1789,2890"; 
 
var margin = {top: 20, right: 10, bottom: 60, left: 10}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var x0 = d3.scale.ordinal() 
 
    .rangeRoundBands([0, width], 0.4); 
 

 
var x1 = d3.scale.ordinal(); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var color = d3.scale.ordinal() 
 
    .range(["#FC654C", "#CCCCCC"]); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x0) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left") 
 
    .tickFormat(d3.format(".2s")); 
 

 
var svg = d3.select("#svg").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
\t 
 
var data = d3.csv.parse(datastring); 
 
var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "Grade"; }); 
 

 
    data.forEach(function(d) { 
 
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
 
    }); 
 

 
    x0.domain(data.map(function(d) { return d.Grade; })); 
 
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
 
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 
 

 

 
\t \t \t 
 
    var grade = svg.selectAll(".grade") 
 
     .data(data) 
 
    .enter().append("g") 
 
     .attr("class", "g") 
 
     .attr("transform", function(d) { return "translate(" + (x0(d.Grade)) + ",0)"; }); 
 
\t 
 
\t 
 

 
    grade.selectAll("rect") 
 
     .data(function(d) { return d.ages; }) 
 
    \t .enter().append("rect") 
 
    \t .attr("class","bars") 
 
     .attr("width", x1.rangeBand()) 
 
     .attr("x", function(d) { return x1(d.name); }) 
 
     .attr("y", function(d) { return y(d.value); }) 
 
     .attr("height", function(d) { return height - y(d.value); }) 
 
     .style("fill", function(d) { return color(d.name); }); 
 
    
 
    grade.selectAll("text") 
 
    .data(function(d) { return d.ages; }) 
 
    \t .enter().append("text") 
 
    \t .attr("class","barstext") 
 
    \t .attr("x",-410) 
 
\t \t .attr("y",function(d,i) {return (i*x1.rangeBand())+(x1.rangeBand()/2)+5; }) 
 
\t \t .attr("transform", "rotate(-90)") 
 
    \t .text(function(d){return d.value}); 
 
\t 
 
\t 
 
\t grade.append("text") 
 
\t \t \t .attr("class","barstext") 
 
\t \t \t .attr("transform", "translate(0,"+(height+10)+")") 
 
\t \t \t .attr("dy",1) 
 
\t \t \t .text(function(d){return d.Grade}).call(wrap, 80); \t 
 
\t function wrap(text, width) { 
 
    text.each(function() { 
 
     var text = d3.select(this), 
 
     words = text.text().split(/\s+/).reverse(), 
 
     word, 
 
     line = [], 
 
     lineNumber = 0, 
 
     y = text.attr("y"), 
 
     dy = parseFloat(text.attr("dy")), 
 
     lineHeight = 1.1, // ems 
 
     tspan = text.text(null).append("tspan").attr("x", function(d) { return d.children || d._children ? -10 : 10; }).attr("y", y).attr("dy", dy + "em");  
 
     while (word = words.pop()) { 
 
      line.push(word); 
 
      tspan.text(line.join(" ")); 
 
      var textWidth = tspan.node().getComputedTextLength(); 
 
      if (tspan.node().getComputedTextLength() > width) { 
 
       line.pop(); 
 
       tspan.text(line.join(" ")); 
 
       line = [word]; 
 
       ++lineNumber; 
 
\t \t \t \t tspan.attr("x", function(d) { return d.children || d._children ? -10 : 8; }).attr("y", y).attr("dy", dy + "em"); 
 
       tspan = text.append("tspan").attr("x", function(d) { return d.children || d._children ? -10 : 5; }).attr("y", 0).attr("dy", lineNumber * lineHeight + dy + "em").text(word); 
 
      } 
 
\t \t \t else{ 
 
\t \t \t \t tspan.attr("x", function(d) { return d.children || d._children ? -10 : 0; }).attr("y", y).attr("dy", dy + "em");  
 
\t \t \t } 
 
     } 
 
    }); 
 
}

body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.bar { 
 
    fill: steelblue; 
 
} 
 

 
.x.axis path { 
 
    display: none; 
 
} 
 
.barstext{ 
 
\t font-size:18px; 
 
\t color:#CCCCCC; 
 
} 
 
.tick text { 
 
    font-size:18px; 
 
\t color:#CCCCCC; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
 
<div id="svg" style="position:relative;width:960px;"> 
 
\t <div style="position: absolute;border-bottom: 2px solid #14B4B4;width: 100%; bottom: 61px;"></div> 
 
</div>