chart.js - ChartJS : two axes in horizontalBar chart

Question

使用标准条形图，我能够成功创建一个图表，其中两个数据集绘制在两个 y 轴上。此处的工作示例:https://jsfiddle.net/pe8kxjqc/12/如何创建与左侧标签和顶部和底部两个数据集轴相同的水平条形图图表？

水平条形图似乎没有按预期处理第二个轴。我尝试了以下方法，但效果不如预期:

var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [
{
   "label": "Total V",
   "xAxisID": "v",
   "backgroundColor": "rgba(53,81,103,1)",
   "borderColor": "rgba(53,81,103,.4)",
   "data": [100,90,80,70,60]
},
{
   "label": "Total C",
   "xAxisID": "c",
   "backgroundColor": "rgba(255,153,0,1)",
   "borderColor": "rgba(255,153,0,.4)",
   "data": [10,9,8,7,6]
}]};

var options = {scales:{
xAxes:[
   {position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
   {position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};

var ctx = document.getElementById("myChart");
new Chart(ctx, {type: "horizontalBar",data:data, options:options});

Answer 1

你可以为 bar 和 horizo​​ntalBar 动态配置你可以使用这个配置

Fiddle demo

var data = {
  labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
  datasets: [{
    "label": "Total V",
    "yAxisID": "A",
    "backgroundColor": "rgba(53,81,103,1)",
    "borderColor": "rgba(53,81,103,.4)",
    "data": [100, 90, 80, 70, 60]
  }, {
    "label": "Total C",
    "yAxisID": "A",
    "backgroundColor": "rgba(255,153,0,1)",
    "borderColor": "rgba(255,153,0,.4)",
    "data": [10, 9, 8, 7, 6]
  }]
};

var options = {
  scales: {
    yAxes: [{
      id: 'A',
      position: 'left'
    }]
  }
};

var ctx = document.getElementById("myChart");
new Chart(ctx, {
  type: "horizontalBar",
  data: data,
  options: options
});

关于您的问题，实际问题是 var options={...} 它只能用于 bar 图表。希望你明白

更新

将上图中的选项替换为所需的轴刻度

var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};

updated fiddle