我可以制作一个有两个类别轴的水平条形图吗？

Question

我是chart.js的新手，我正在尝试设置一个在x和y轴上都有类别的水平条形图。我已经得到了可以正确显示的轴，但没有显示任何数据。

我试着切换到折线图，试图找出哪里出了问题，数据在折线图上显示得很好。我能不能在水平条形图中不使用两个类别轴？还是我做错了什么？

以下是我设置图表所需的内容：

var config = {
    type: 'horizontalBar',
    data: {
    yLabels: ["Individual Thinking", "Individual Feeling", "Individual Doing",
    "Partner Thinking", "Partner Feeling", "Partner Doing",
    "Team Thinking", "Team Feeling", "Team Doing",
    "Cultural Thinking", "Cultural Feeling", "Cultural Doing"],
    xLabels: ["","No Complexity","","Below Average","","","Average","Above Average","Highly Focused", "", "", "", "", "Extraordinarily Focused"],
    datasets: [{
        data: ["No Complexity","No Complexity","No Complexity","No Complexity",
        "No Complexity","No Complexity","No Complexity","No Complexity",
        "No Complexity","No Complexity","No Complexity","No Complexity"]
        }]
    },
    options: {
        responsive: true,
        title: {
            display: false,
        },
        scales: {
            xAxes: [{
                type: 'category',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Complexity'
                }
            }],
            yAxes: [{
                type: 'category',
                position: 'left',
                display: true,
                scaleLabel: {
                    display: false
                }
            }]
        }
    }
};

Here's结果是什么样子的。

​

​

非常感谢你的帮助！

Answer 1

是。你可以的。我修改了您的代码以获得如下所示的输出。

​

​

这是complete code with demo。

您必须在刻度中添加一个配置回调，以更新x轴的参数。

这就是代码。

*注:请同时关注min、max和step size。

​

//Labels for your x-axis
var xLabels = {
  20: 'No Complexity',
  40: 'Below Average',
  60: 'Average',
  80: 'Above Average',
  100: 'Highly Focused',
  120: 'Extraordinarily Focused'
}

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart you want to create
  type: 'horizontalBar',

  // The data for your dataset
  data: {
    labels: ["Individual Thinking", "Individual Feeling", "Individual Doing",
      "Partner Thinking", "Partner Feeling", "Partner Doing",
      "Team Thinking", "Team Feeling", "Team Doing",
      "Cultural Thinking", "Cultural Feeling", "Cultural Doing"
    ],
    datasets: [{
      label: 'Dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [27, 25, 50, 45, 110, 62, 30, 100, 56, 28, 87, 30, 71, 23]
    }]
  },

  // Configuration options go here
  options: {
    scales: {
      xAxes: [{
        ticks: {
          callback: function(value, index, values) {
            return xLabels[value];
          },
          beginAtZero: true,
          min: 20, //The minimum value in the data range
          max: 120, //The maximum value in the data range
          stepSize: 20, //The gap between each x-axis index
        }
      }]
    }
  }
});

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

​

Answer 2

我不知道原因，但是用扁钩就行了

​

var GX=["","No Complexity","Below Average","Average","Above Average","Highly Focused","","","","" ,"Extraordinarily Focused"];
var GY=["Individual Thinking", "Individual Feeling", "Individual Doing",
    "Partner Thinking", "Partner Feeling", "Partner Doing",
    "Team Thinking", "Team Feeling", "Team Doing",
    "Cultural Thinking", "Cultural Feeling", "Cultural Doing"];
    
var DataWant=["No Complexity","No Complexity","No Complexity","No Complexity",
        "No Complexity","No Complexity","No Complexity","No Complexity",
        "No Complexity","No Complexity","No Complexity","No Complexity"]; 
var Map={};
for(var i =0;i<GX.length;i++){
  Map[GX[i]]=i;
}
var RealInput=[];
for(var i =0;i<DataWant.length;i++){
  RealInput.push(Map[DataWant[i]]);
}

    var DrawData = {
    labels:GY,
        datasets: [
            {
                label: "0.0",
                data: RealInput,
                backgroundColor: ["#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966" ],
            }]
    };

var ctx = document.getElementById('ChartDraw').getContext('2d');
var DrawChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: DrawData,
    options: {
    
        scales: {
          
             xAxes: [{
                 scaleLabel: {
                display: true,
                labelString: 'Complexity'
            },
            ticks: {
              callback: function(value, index, values) {
                        return GX[index];
              },min: 0,max:10,
            }
            }],
            
            
            
            
            
              yAxes: [{type: 'category',
                display: true,
                stacked: true,
                ticks: {
              callback: function(value, index, values) {
                        return GY[index];
              },min: 0,max:12
            }
                
            }]
            
            
            
            
            
        }

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />


<canvas id="ChartDraw"></canvas>

​