是否可以定义具有多级/类别轴的条形图？
例如，我想显示区域/省类别，如以下Excel图表所示：
我找到了使用多个xAxx 1 e0f1x示例。
xAxes:[
{
id:'xAxis1',
type:"category",
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
return month;
}
}
},
{
id:'xAxis2',
type:"category",
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
if(month === "February"){
return year;
}else{
return "";
}
}
}
}
]问题是，两个轴似乎没有真正连接，第二个轴的对齐是基于值，而不是在较低级别类别的中间对齐。
在chart.js中是否有一种简洁的方法来实现这一点？
**更新：**我最终在chartjs上创建了一个feature request。
4条答案
按热度按时间t40tm48m1#
您可以通过
datesets为不同的轴分别提供值，并为对象提供不同的配置选项(borderColor, pointBackgroundColor, pointBorderColor)等，我希望它会有所帮助。这里是的链接，带有更新（您共享的小提琴）Updated Fiddle
}
我希望这能解决你的问题：）
h43kikqp2#
希望这能有所帮助，
我做了一些研究，但没有找到在chartjs中实现您的解决方案的方法。Chartjs有分组的条形图，但没有像您这样的子分组条形图。
以下是一些替代方案
D3js（https://d3js.org/）可以用来创建子分组条形图。数据可以从csv或json加载。D3是高度可配置的，但你可能要付出一些努力比chartsjs。
ZingChart是一个商业工具，可用于实现具有子组的条形图。
https://www.zingchart.com/docs/chart-types/bar-charts/
但是我更喜欢D3而不是这个库。因为D3是在BSD许可证下的。
zazmityj3#
这应该会按照您的要求工作http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#8-grouped-bar-chart
5f0d552i4#
我所能找到的具有此特性的最佳库是Highcharts，这是我的实现：
和这里的http://jsfiddle.net/fieldsure/Lr5sjh5x/2/，您可以了解如何实现它。
第一个
但问题是这个库并不是免费用于商业用途的，这是Chartjs implementation，在我的例子中它是这样的：
第一个
对于每多一列，只需添加另一个数据集。