如何使用 Chart.js 实现“水平”条形图和折线图的混合图表？

Question

显然，使用垂直条，整个混合图表可以很好地呈现。但是当我用horizontally 和two X Axes and one Y Axis 进行操作时，只会出现条形图而不会出现折线图。我看过其他问题，但没有一个专门讨论过这个问题。

This is what I want to achieve using Chart.js

另外出于某种原因，我不得不为scales.xAxes 提供type: 'linear'，其中id: 'maturity'（如下代码所示）出于某种原因，否则Y 轴上的字符串标签也会重复为X 轴标签太

var ctx = document.getElementById("myChart");
let chart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['Information Security', 'Asset Management', 'Human Resource Security', 'Physical Security', 'Equipment Security', 'Access Management', 'Review', "Policy Governance", 'Security Coordination', 'label10', 'label11', 'label12', 'label13'],
    datasets: [{
        xAxisID: 'compliance', // X axis 1
        data: [25, 15, 25, 25, 45, 15, 25, 25, 25, 25, 80, 80, 80],
        label: "Compliance",
        backgroundColor: "#3367D6",
        borderColor: 'rgba(105,159,177,1)',
        categoryPercentage: 0.8,
      },
      {
        type: 'line', // line type dataset
        xAxisID: 'maturity', // X axis 2
        data: [4, 4, 3, 3, 4, 5, 4, 4, 3, 3, 4, 5, 4],
        label: "Threshold for Maturity",
        backgroundColor: "rgba(247, 148, 30, 1)",
        borderColor: 'rgba(247, 148, 30, 1)',
        fill: false,
      },
      {
        xAxisID: 'maturity', // X axis 2
        data: [2, 4, 3, 2, 4, 4, 3, 3, 4, 5, 4, 4, 3],
        label: "Maturity level",
        backgroundColor: "#F7941E",
        borderColor: 'rgba(77,20,96,1)',
        categoryPercentage: 0.8,
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      align: 'end',
      labels: {
        usePointStyle: true
      },
      position: 'top'
    },
    scales: {
      yAxes: [{
        fontStyle: 'bold',
        ticks: {
          fontSize: 11,
        },
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Domains',
          fontStyle: 'bold',
          fontSize: 15
        }
      }],
      xAxes: [{
        id: 'compliance',
        position: 'top',
        ticks: {
          beginsAtZero: true,
          min: 0,
          stepSize: 25
        },
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Compliance %',
          fontStyle: 'bold',
          fontSize: 15
        }
      }, {
        id: 'maturity',
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: 1,
          max: 5,
          stepSize: 1,
          callback: function(value, index, values) {
            return 'L' + value;
          },
          fontStyle: 'bold'
        },
        scaleLabel: {
          display: true,
          labelString: 'Maturity Level',
          fontStyle: 'bold',
          fontSize: 15
        }
      }]
    }
  }
})

<canvas class="chart" height="250px" id="myChart"></canvas>

Answer 1

我认为问题在于，它试图为 x 轴使用标签，为 y 轴使用数据。

对于 Chart.js v2.x，您可以尝试将行的数据作为对象数组提供：[{x: 4, y: 'Information Security'}, {x: ...，我认为应该可以。

在 v3（仍处于测试阶段）中，没有 horizontalBar 图表类型。相反，有一个新选项indexAxis，适用于所有图表类型。 migration guide to v3

这是使用 v3 的方法：

var ctx = document.getElementById("myChart");
let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Information Security', 'Asset Management', 'Human Resource Security', 'Physical Security', 'Equipment Security', 'Access Management', 'Review', "Policy Governance", 'Security Coordination', 'label10', 'label11', 'label12', 'label13'],
    datasets: [{
        xAxisID: 'compliance', // X axis 1
        data: [25, 15, 25, 25, 45, 15, 25, 25, 25, 25, 80, 80, 80],
        label: "Compliance",
        backgroundColor: "#3367D6",
        borderColor: 'rgba(105,159,177,1)',
        categoryPercentage: 0.8,
      },
      {
        type: 'line', // line type dataset
        xAxisID: 'compliance', // X axis 2
        data: [4, 4, 3, 3, 4, 5, 4, 4, 3, 3, 4, 5, 4],
        label: "Threshold for Maturity",
        backgroundColor: "rgba(247, 148, 30, 1)",
        borderColor: 'rgba(247, 148, 30, 1)',
        fill: false
      },
      {
        xAxisID: 'maturity', // X axis 2
        data: [2, 4, 3, 2, 4, 4, 3, 3, 4, 5, 4, 4, 3],
        label: "Maturity level",
        backgroundColor: "#F7941E",
        borderColor: 'rgba(77,20,96,1)',
        categoryPercentage: 0.8,
      }
    ]
  },
  options: {
    indexAxis: 'y', // this changes the orientation for all datasets in v3
    responsive: true,
    legend: {
      align: 'end',
      labels: {
        usePointStyle: true
      },
      position: 'top'
    },
    scales: {
      y: {
        fontStyle: 'bold',
        ticks: {
          fontSize: 11,
        },
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Domains',
          font: {
            style: 'bold',
            size: 15
          }
        }
      },
      compliance: {
        position: 'top',
        beginsAtZero: true,
        min: 0,
        ticks: {
          stepSize: 25
        },
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Compliance %',
          font: {
            style: 'bold',
            size: 15
          }
        }
      },
      matyrity: {
        type: 'linear',
        position: 'bottom',
        min: 1,
        max: 5,
        ticks: {
          stepSize: 1,
          callback: function(value, index, values) {
            return 'L' + value;
          },
          font: {
            style: 'bold'
          }
        },
        scaleLabel: {
          display: true,
          labelString: 'Maturity Level',
          font: {
            style: 'bold',
            size: 15
          }
        }
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6/dist/chart.min.js"></script>
<canvas class="chart" height="250px" id="myChart"></canvas>