【问题标题】:Add padding between two y-axis scales using chart.js使用 chart.js 在两个 y 轴刻度之间添加填充
【发布时间】:2016-12-14 03:56:15
【问题描述】:

我正在使用 chart.js 绘制三个不同的数据集。我正在使用三个 y 轴(左侧两个,右侧一个)。我为所有 y 轴添加了轴标题。但是,左内标题确实靠近外轴。我尝试在 scaleLabel{} 中使用边距和填充将轴与标题分开,但这似乎不起作用。有任何想法吗?

JSFiddle

参见下面的示例代码:

var leftInside = [
    ['2005-01-01','2005-02-01','2005-03-01','2005-04-01','2005-05-01','2005-06-01'],
    [32, 45, 56, 44, 67, 80]];

var leftOutside = [
['2005-01-01','2005-02-01','2005-03-01','2005-04-01','2005-05-01','2005-06-01'],
[2, -8, 12, 4, 15, 13]];

var right = [
['2005-01-01','2005-02-01','2005-03-01','2005-04-01','2005-05-01','2005-06-01'],
[133, 137, 145, 152, 160, 130]];

var ctx = document.getElementById("chartjs").getContext("2d");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    "labels": leftInside[0],
    "datasets": [{
      "label": "left outside",
      yAxisID: "y-axis-2",
      "data": leftInside[1]
    }, {
      "label": "price ($)",
      // "fill": "false",
      yAxisID: "y-axis-1",
      "data": right[1],
      backgroundColor: "rgba(000,111,111,.5)",
      // fill: false
    }, {
      "label": "left inside",
      yAxisID: "y-axis-0",
      "data": leftOutside[1]
      // fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: "left outside"
        },
        position: "left",
        "id": "y-axis-0",
      }, {
        scaleLabel: {
          display: true,
          labelString: "right",
        },
        position: "right",
        "id": "y-axis-1",
      }, {
        scaleLabel: {
          display: true,
          labelString: "left inside",
        },
        postion: "left",
        "id": "y-axis-2",
      }]
    }
  }
});

【问题讨论】:

标签: javascript charts chart.js axis-labels


【解决方案1】:

这是 chart.js 中的未解决问题,请查看 this

【讨论】:

    猜你喜欢
    • 2017-03-23
    • 1970-01-01
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-02
    • 1970-01-01
    相关资源
    最近更新 更多