有没有办法将多个图组合成一个单一图？

Question

我不知道如何搜索这个，因为我真的不知道如何输入它，所以如果已经有现有的解决方案，我提前道歉。

我的问题： 假设我有几个部分，每个部分都有一个子部分。例如，A 部分有 3 个子部分：A 部分 (1)、A 部分 (2) 和 A 部分 (3)。目前，我能够为 A 部分的每个子部分生成 3 个不同的图表。现在，是否可以使用 ChartJS 将所有这些图表组合成一个单一的图表，这样就只有 1 个由所有这些组成的大图表像这样的子部分：

注意：目前仅讨论垂直线图。

谢谢。

我只能为每个部分创建一个图表，不知道如何将每个部分组合成一个图表。

Answer 1

问题：

假设我有几个部分，每个部分都有一个子部分。例如，A 部分有 3 个子部分：A 部分 (1)、A 部分 (2) 和 A 部分 (3)。目前，我可以为 A 部分的每个子部分生成 3 个不同的图表。

解决方案：

在数据集数组下传递多个数据项，

我不确定你的意思是

ChartJS

5还是

react-chartjs-2

4但解决方案仍然是相同的。

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
      type: 'bar',
      data: {
      labels:['Sec:A-1','Sec:A-2','Sec:A-3'] , // x-axis labels
      datasets: [
        {
          label: 'Label A-1',           // Legend label
          data: [10,40,70],

        },
        {
          label: 'Label A-2',           // Legend label
          data: [20,50,80],

        },
        {
          label: 'Label A-3',           // Legend label
          data: [30,60,90],

        }
      ]
    },
   });

 

</script>
 

说明：

以下代码来自ChartJS官方文档：

条形图边框半径示例 1:

可以看到，

datasets

key是每个section的数组，

因此，您应该将 A-1、A-2、A-3 部分作为

datasets

数组中的对象传递。 （Utils由ChartJS提供）。

Utils.numbers(NUMBER_CFG)

是随机数数组。

因为造型而忽略外观(

borderColor, backgroundColor, borderWidth, borderRadius

)。

const data = {
  labels: labels,
  datasets: [
    {
      label: 'Fully Rounded',          // here will be your section name A-1
      data: Utils.numbers(NUMBER_CFG), // here will be your data values [1,2...]
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      borderWidth: 2,
      borderRadius: Number.MAX_VALUE,
      borderSkipped: false,
    },
    {
      label: 'Small Radius',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderWidth: 2,
      borderRadius: 5,
      borderSkipped: false,
    }
  ]
};

类似地在堆积条形图示例2中查看数据集。

所以在你的情况下，（我已经排除了与样式相关的额外代码）：

datasets: [
        {
          label: 'A-1',          
          data: [10,20,30,40],
        },
       {
          label: 'A-2',          
          data: [50,60,70,80],
        },
        {
          label: 'A-3',          
          data: [90,100,10,20],
        },
      ]

请阅读更多：

1. 条形图边框半径： https://www.chartjs.org/docs/latest/samples/bar/border-radius.html
2. 堆叠条形图：https://www.chartjs.org/docs/latest/samples/bar/stacked.html
3. 实用程序：https://www.chartjs.org/docs/latest/samples/utils.html
4. react-chartjs-2：https://react-chartjs-2.js.org/examples/vertical-bar-chart
5. Chart.js：https://www.chartjs.org/docs/latest/

如果还有疑问，请留言。如果这个答案对您有帮助，那么您可以将其标记为答案。