使用 ChartJS 创建多组条形图 - 见下图

问题描述

我正在测试 HighCharts 和 ChartJS 以查看使用哪个.对于 Highcharts，我找到了一个技巧来创建一个在 x 轴上有双重分组的条形图.

I am testing out HighCharts and ChartJS to see which to use. For Highcharts, I was able to find a hack to create a bar chart that had double grouping on the x-axis.

这就是我想要的样子:

我对两种图表 JS 选项都不熟悉，想知道是否有办法在 ChartJS 中做到这一点.

I am new to both charting JS options and wonder if there is a way to do this in ChartJS.

我有这样的数据集:

    xAxis: {
        categories: [{
            name: "Total",
            categories: ["2004", "2008", "2012"]
        }, {
            name: "Lower than 2.50",
            categories: ["2004", "2008", "2012"]
        }]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Percent (%)'
        }
    },
    series: [{
        name: 'Male',
        data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4]

    }, {
        name: 'Female',
        data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6]

    }]

本质上，我需要在 x 轴上创建一个嵌套系列，并且我愿意使用 Github 中的插件或代码来执行此操作.

Essentially I need a nest series on the x-axis and I am open to plugins or code from Github to do this.

推荐答案

您可以使用 插件核心 API.它提供了可用于执行自定义代码的不同钩子.在下面的代码中，我使用 afterDraw 钩子来绘制类别标签和分隔线.

You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code, I use the afterDraw hook to draw the category labels and the delimiter lines.

new Chart('myChart', {
  type: 'bar',
  plugins: [{
    afterDraw: chart => {
      let ctx = chart.chart.ctx;
      ctx.save();
      let xAxis = chart.scales['x-axis-0'];
      let xCenter = (xAxis.left + xAxis.right) / 2;
      let yBottom = chart.scales['y-axis-0'].bottom;
      ctx.textAlign = 'center';
      ctx.font = '12px Arial';
      ctx.fillText(chart.data.categories[0], (xAxis.left + xCenter) / 2, yBottom + 40);
      ctx.fillText(chart.data.categories[1], (xCenter + xAxis.right) / 2, yBottom + 40);
      ctx.strokeStyle  = 'lightgray';
      [xAxis.left, xCenter, xAxis.right].forEach(x => {
        ctx.beginPath();
        ctx.moveTo(x, yBottom);
        ctx.lineTo(x, yBottom + 40);
        ctx.stroke();
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ['2004', '2008', '2012', '2016', '2004', '2008', '2012', '2016'],
    categories: ['Total', 'Lower than 2.50'],
    datasets: [{
        label: 'Male',
        data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4, 51.2, 51.8],
        backgroundColor: 'rgba(124, 181, 236, 0.9)',
        borderColor: 'rgb(124, 181, 236)',
        borderWidth: 1
      },
      {
        label: 'Female',
        data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6, 53.7, 54.6],
        backgroundColor: 'rgba(67, 67, 72, 0.9)',
        borderColor: 'rgb(67, 67, 72)',
        borderWidth: 1
      }
    ]
  },
  options: {
    legend: {
      position: 'bottom',
      labels: {
        padding: 30,
        usePointStyle: true
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 80,
          stepSize: 20
        },
        scaleLabel: {
          display: true,
          labelString: 'Percent (%)'
        }
      }],
      xAxes: [{
        gridLines: {
          drawOnChartArea: false
        }
      }]
    }
  }
});

canvas {
  max-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

这篇关于使用 ChartJS 创建多组条形图 - 见下图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！