使用 chart.js 的年龄金字塔图答案

【问题标题】：Age pyramid chart using chart.js使用 chart.js 的年龄金字塔图
【发布时间】：2021-08-03 10:12:20
【问题描述】：

我正在尝试使用 chart.js 像这样（例如）创建一个图表：

https://thebreadoflifeblog.files.wordpress.com/2013/01/uk-age-pyramid.png

我尝试了多种可能性，到目前为止，我发现最好的一个是使用合并两个水平条形图的简单技巧：

但其实也有一些问题。

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

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

【问题讨论】：

标签： chart.js

【解决方案1】：

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

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

const populationPyramidOptions = {
scales: {
    yAxes: [{
        stacked: true
    }],
    xAxes: [{
        stacked: false
    }]
}


<HorizontalBar data={chartData} options={populationPyramidOptions} />

你可以得到一个相当不错的结果：

【讨论】：

【解决方案2】：

如果您直接使用 chartjs，请在此处查看解决方案： https://github.com/nknganda/pyramid_chart_example

选项的语法与 chartjs > 3.x 不兼容

更新后的代码下方：

options = {
  plugins: {
    tooltip: {
      intersect: true,
      callbacks: {
        label: function(context) {
          var label = context.dataset.label || '';
          var value = context.formattedValue;
          var positiveOnly = value < 0 ? -value : value;
          if (label) {
              label += ': ';
          }
          if (context.parsed.y !== null) {
              label += positiveOnly
          }
          return label;
        },
      },
     },
    legend: {
      position: "bottom",
    },
  },
  responsive: true,
  scales: {
     x: {
      stacked: false,
      ticks: {
        beginAtZero: true,
        callback: (v) => {
          return v < 0 ? -v : v;
        },
      },
     },
    y: {
       stacked: true,
      ticks: {
        beginAtZero: true,
      },
      position: "left",
    },
   },
   indexAxis: 'y'
 }

请注意，工具提示现在是工具提示和插件内部，以及图例。

xAxies 和 yAxies 是 x 和 y，不再是列表。您可以在官方 chartjs 文档中找到更多信息。

数据集不会改变，因为您只需将值设为负数。

【讨论】：