使用 chart.js 的年龄金字塔图 [英] Age pyramid chart using chart.js

问题描述

我正在尝试使用 chart.js 像这样(例如)创建一个图表:

但其实也有一些问题.

1. 正如我所说，这实际上是两个不同的图表.我只想拥有一个对象.
2. 我删除了 yAxis.我可以留下一个来显示 yAxis 标签，但在这种情况下，两个图形之一将小于另一个.我希望在两个图表之间显示标签.
3. 左边的图表是使用负值来实现从右到左的条形图.有没有办法恢复"一个轴?我看到有一个 'Scale' 方法，但只是恢复轴似乎很复杂......

我想知道我是否可以做一些事情来更轻松地创建这样的图表，最重要的是，作为一个独特的图表.

解决方案

我遇到了和你一样的问题，并设法使用 React ChartJS 的 Horizo​​ntalBarChart 修复它:但只有一个 ;-)

尝试使用 options 属性堆叠 yAxis 并添加两个数据集

const populationPyramidOptions = {秤:{y轴:[{堆叠:真}],x轴:[{堆叠:假}]}<Horizo​​ntalBar 数据={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.

1. As I said, this is actually two different charts. I would like to have only one object.
2. 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.
3. 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:

这篇关于使用 chart.js 的年龄金字塔图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！