All geek questions in one place

Make a simple chart using C3 with individual columns along the x axis

I am trying to create a histogram using C3 and D3, but I am having problems so that the columns are not connected to each other, except that they use the same scale along the Y axis.

I included images to better explain.

var chart = c3.generate({ bindto: '#designerChart', data: { columns: [ ['MA', 6], ['ME', 8], ['NY', 6], ['CN', 5], ['TX', 2] ], type: 'bar', }, axis: { y: { max: 10, min: 0, padding: { top: 0, bottom: 0 } } } });

The results are in a group of bars, and when I hang over them, I get the details for all the bars - not what I want.

Histogram but grouped as a stepped column

I can change the data to display individual columns, but they are the same color, and when I want to go to the pie chart, you cannot distinguish between states.

 var chart = c3.generate({ bindto: '#designerChart', data: { x: 'x', columns: [ ['x','MA', 'ME', 'NY', 'CN', 'TX'], ['rainfall', 6, 8, 6, 5, 4 ] ], type: 'bar', }, axis: { x: { type: 'category' }, y: { max: 10, min: 0, padding: { top: 0, bottom: 0 } } } });

graph but not different colors pointless pie chart

This is what I want:

enter image description here

+5
source share
1 answer

Solution for the line:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet" /> <script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>C3 Bar Chart</title> </head> <body> <div id="designerChart"></div> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { columnColors = ['#9a4d6f', '#c76c47', '#f85115', '#d9b099', '#d4ba2f']; function setColumnBarColors(colors, chartContainer) { $('#' + chartContainer + ' .c3-chart-bars .c3-shape').each(function(index) { this.style.cssText += 'fill: ' + colors[index] + ' !important; stroke: ' + colors[index] + '; !important'; }); $('#' + chartContainer + ' .c3-chart-texts .c3-text').each(function(index) { this.style.cssText += 'fill: ' + colors[index] + ' !important;'; }); } var chart = c3.generate({ bindto: '#designerChart', data: { columns: [ ['rainfall', 6, 8, 6, 5, 4] ], type: 'bar' }, axis: { x: { label: { text: 'States', position: 'outer-center', }, type: 'category', categories: ['MA', 'ME', 'NY', 'CN', 'TX'], tick: { centered: true } }, y: { label: { text: 'Rainfall (inches)', position: 'outer-middle' }, max: 10, min: 0, padding: { top: 0, bottom: 0 } } }, legend: { show: false } }); setColumnBarColors(columnColors, 'designerChart'); // Color turns to original when window is resized // To handle that $(window).resize(function() { setColumnBarColors(columnColors, 'designerChart'); }); }); </script> </body> </html>

The colors refer to the original in this violin (Full page). But it changes colors as aspected to working local files and local links c3, d3 and jquery.

References:

+5
source

Source: https://habr.com/ru/post/1234424/

More articles:


All Articles