我正在尝试使用C3和D3创建条形图,但是除了使它们在Y轴上使用相同的比例外,我很难使各列彼此无关。
我提供了图片以更好地说明。
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 }
}
}
});
结果是一组条形图,当我将它们悬停在它们上时,会得到所有条形图的详细信息,而不是我想要的。
我可以更改数据,以使其显示单独的列,但是它们具有相同的颜色,并且当我要将其转换为饼图时,无法区分状态。
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 }
}
}
});
这就是我要的:
<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>
颜色在此小提琴中变为原始(整页)。但是它会根据工作的本地文件以及c3,d3和jquery的本地引用改变颜色。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句