Chart.js-每个数据集值=不同的轴

Question

我要使用Chart.js将单个值从我的数据集缩放到另一个轴（而不是整个数据集）

如屏幕截图所示，这4个项目具有不同的单位（千克，米）。最后一个项目栏hehehe [KG]的长度错误（应为3kg）。

我知道可以为不同的数据集分配不同的轴，但这不是我所需要的。

是否可以将不同的轴应用于特定的数据集值？

我的图表的屏幕截图

Answer 1

无法将其他轴应用于数据集中的特定值。

据我了解，您想要

  

@JsonIgnoreProperties(ignoreUnknown=true) 可以沿hehehe [KG]轴缩放

您可以通过根据单位分离数据集，然后将每个数据集映射到其所需的轴来轻松解决此问题。

---

代码段

[kg]

Chart.defaults.global.elements.line.fill = false;

var barChartData = {
  labels: ['2016', '2017', '2018', '2019'],
  datasets: [{
    type: 'bar',
    label: 'a',
    id: "y-axis-0",
    data: [1000, 2000, 4000, 5000],
    backgroundColor: "rgba(217,83,79,0.75)"
  }, {
    type: 'bar',
    label: 'b',
    id: "y-axis-0",
    data: [500, 600, 700, 800],
    backgroundColor: "rgba(92,184,92,0.75)"
  }, {
    type: 'line',
    label: 'c',
    id: "y-axis-0",
    data: [1500, 2600, 4700, 5800],
    backgroundColor: "rgba(51,51,51,0.5)"
  }, {
    type: 'line',
    label: 'd',
    id: "y-axis-1",
    data: [5000, 3000, 1000, 0],
    backgroundColor: "rgba(151,187,205,0.5)"
  }]
};

var element = document.getElementById("myChart");

// allocate and initialize a chart
var chart = new Chart(element, {
  type: 'bar',
  data: barChartData,
  options: {
    title: {
      display: true,
      text: "Chart.js Bar Chart - Stacked"
    },
    tooltips: {
      mode: 'label'
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
        position: "left",
        id: "y-axis-0",
      }, {
        stacked: false,
        position: "right",
        id: "y-axis-1",
      }]
    }
  }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

希望有帮助！