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

问题描述

使用竖线显然可以使整个混合图表呈现良好的效果。但是，当我使用OneLineAvatarListItem: text: "Message" IconLeftWidget: icon: 'email' MDCard: id: card1 orientation: "vertical" padding: "8dp" size_hint: None,None size: "280dp","180dp" pos_hint: {"center_x": .5,"center_y": .5} MDIconButton: icon: 'trash-can' on_release: app.remove(root) pos_hint: {'center_x':0.9} MDLabel: text: root.label_var1 theme_text_color: "Secondary" size_hint_y: None height: self.texture_size[1] 进行horizontally时，只会显示条形图，而不会显示折线图。我看过其他问题，但没有一个人专门讨论这个问题。

This is what I want to achieve using Chart.js

也由于某种原因，我出于某种原因不得不为two X Axes and one Y Axis提供type: 'linear'，其中scales.xAxes（如下代码所示），否则，Y轴上的字符串标签也会重复自己作为X轴标签

id: 'maturity'

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,45,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,5,4],label: "Threshold for maturity",backgroundColor: "rgba(247,148,30,1)",borderColor: 'rgba(247,fill: false,{
        xAxisID: 'maturity',// X axis 2
        data: [2,2,3],label: "maturity level",backgroundColor: "#F7941E",borderColor: 'rgba(77,20,96,}
    ]
  },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
        },labelString: 'Compliance %',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'
        },labelString: 'maturity Level',fontSize: 15
        }
      }]
    }
  }
})

解决方法

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

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

在v3（仍为beta）中，没有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,45,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,5,4],label: "Threshold for Maturity",backgroundColor: "rgba(247,148,30,1)",borderColor: 'rgba(247,fill: false
      },{
        xAxisID: 'maturity',// X axis 2
        data: [2,2,3],label: "Maturity level",backgroundColor: "#F7941E",borderColor: 'rgba(77,20,96,}
    ]
  },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
        },labelString: 'Compliance %',matyrity: {
        type: 'linear',position: 'bottom',min: 1,max: 5,ticks: {
          stepSize: 1,callback: function(value,index,values) {
            return 'L' + value;
          },font: {
            style: 'bold'
          }
        },labelString: 'Maturity Level',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>