我正在尝试使用 chart.js 像这样(例如)创建一个图表:
但其实也有一些问题.
正如我所说,这实际上是两个不同的图表.我只想拥有一个对象.我删除了 yAxis.我可以留下一个来显示 yAxis 标签,但在这种情况下,两个图形之一将小于另一个.我希望在两个图表之间显示标签.左边的图表是使用负值来实现从右到左的条形图.有没有办法恢复"一个轴?我看到有一个 'Scale' 方法,但只是恢复轴似乎很复杂......我想知道我是否可以做一些事情来更轻松地创建这样的图表,最重要的是,作为一个独特的图表.
解决方案我遇到了和你一样的问题,并设法使用 React ChartJS 的 HorizontalBarChart 修复它:但只有一个 ;-)
尝试使用 options 属性堆叠 yAxis 并添加两个数据集
const populationPyramidOptions = {秤:{y轴:[{堆叠:真}],x轴:[{堆叠:假}]}<HorizontalBar 数据={chartData} 选项={populationPyramidOptions}/>
你可以得到一个相当不错的结果:
I'm trying to create a chart using chart.js like this one (for example):
https://thebreadoflifeblog.files.wordpress.com/2013/01/uk-age-pyramid.png
I tried multiple possibilities and so far, the best one I found is using a simple trick of merging two horizontalBar charts:
But there are actually some problems.
As I said, this is actually two different charts. I would like to have only one object. I removed the yAxis. I could leave one to display the yAxis labels, but in that case, one of the two graphics will be smaller than the other one. I would like the labels to be displayed between both charts. The chart on the left is using negative value to achieve the right to left bars. Is there a way to 'revert' an axis ? I saw there is a 'Scale' method, but it seems complicated for just reverting the axis...I would like to know if there is something I can do to create such chart easier and, most important, as one unique chart.
解决方案I ran up against the same problems as you, and managed to fix it using React ChartJS' HorizontalBarChart: but only one ;-)
Try stacking the yAxis and adding two datasets, using the options property
const populationPyramidOptions = {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: false
}]
}
<HorizontalBar data={chartData} options={populationPyramidOptions} />
You can get a pretty good result: