使用 rechart 或 react-chartjs-2 使用 ReactJS 创建混合条形图

问题描述

image screen shot 我正在尝试使用 recharts 或 react-chartjs-2 库为 ReactJS 中图表的以下要求实现多个条形图。 我找不到任何可用的直接解决方案。任何关于如何创建类似类型图表的建议

const data = [ { type: "Sample 1",data: [600,400,200,800] },{ type: "Sampel 2",data: [700,300,600,600] },{ type: "Total",data: [1300,700,800,1400] } ];

解决方法

主要要求可以通过定义两个 xAxes 来满足，一个用于单个值 ('x1')，另一个用于总条形 ('x2')。

有关更多详细信息，请参阅 Chart.js 文档中的 "Creating Multiple Axes" 章节

请看下面的代码示例，看看它是如何工作的。虽然这是一个纯粹的 JavaScript 解决方案，但该概念也适用于 react-chartjs-2。

const data = [{
  type: "Sample 1",data: [600,400,200,800]
},{
  type: "Sampel 2",data: [700,300,600,600]
},{
  type: "Total",data: [1300,700,800,1400]
}];

new Chart('myChart',{
  type: "bar",data: {
    labels: ["A","B","C","D"],datasets: [{
        label: data[0].type,xAxisID: 'x1',data: data[0].data,backgroundColor: 'rgb(54,162,235)',barPercentage: 1
      },{
        label: data[1].type,data: data[1].data,backgroundColor: 'rgb(255,159,64)',{
        label: data[2].type,xAxisID: 'x2',data: data[2].data,backgroundColor: 'rgb(172,215,250)',barPercentage: 1
      }
    ]
  },options: {
    legend: {
      labels: {
        filter: item => item.text != 'Total'
      }
    },scales: {
      yAxes: [{
        ticks: {
          min: 0,stepSize: 200
        }
      }],xAxes: [{
          id: 'x1'
        },{
          id: 'x2',display: false,offset: true
        }
      ]
    }
  }
});

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