Question

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

horizontalBar图表似乎没有按预期处理第二个轴。我尝试了以下但是它不能像预期的那样工作：

Access-Control-Allow-Origin: https://myotherexample.com

Answer 1

您可以为bar动态配置，也可以horizontalBar使用此配置

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图表。希望你理解

<强>更新

在上面的图表中将以下内容替换为option以获取所需的轴刻度

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

Answer 2

基本上，第一个要保存标签的数据集将需要y轴。并且您将需要两个x轴，以在顶部和底部显示值。

第二个数据集将转到顶部显示的x轴。

工作中的小提琴包括：

{
  scales: {
    yAxes: [{
      id: 'A',
      position: 'left',
      display: true,
      gridLines: {
        color: "rgba(53,81,103,.4)"
      }
    }, ],
    xAxes: [{
      barPercentage: 0.4,
      display: true,
      id: "1",
      position: 'bottom',
      ticks: {
        fontColor: 'rgb(0, 0, 0)'
      },
      fontSize: 500,
    }, {
      stacked: false,
      barPercentage: 1,
      display: true,
      type: 'linear',
      id: '2',
      position: 'top',
      ticks: {
        fontColor: 'rgb(0, 0, 0)'
      },
      fontSize: 500,
    }],
  }
};

fiddle for two axis horizontal bar chart

ChartJS：水平条形图中的两个轴

2 个答案: