ChartJS 我们如何将一个时间序列放在左边的Y轴上,另一个放在右边的Y轴上?

bkhjykvo  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(220)

我们如何将一个时间序列放在左边的Y轴上,另一个时间序列放在右边的Y轴上(这样我们就可以使用两个单独的刻度)?
This is the current chart view
This is the sample chart view I need with left and right time series on Y-axis
我用来呈现图表的示例代码是:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

var xValues = [8.8, 8.6, 9.0, 9.7, 9.5, 9.1, 9.0, 9.2, 9.0, 9.6];
var yValues = [31.0, 23.0, 23.0, 45.29, 44.21, 3.53, 83.0, 21.0, 80.0, 38.88]
var labels = ['W12', 'W13', 'W14', 'W15', 'W16', 'W17', 'W18', 'W1P', 'W2P', 'W3P'];

new Chart("id", {
  type: "line",
  data: {
    labels: labels,
    datasets: [{ 
      data: xValues,
      borderColor: "green",
      fill: false,
      label: "Salary"
    }, { 
      data: yValues,
      borderColor: "orange",
      fill: false,
      label: "Ownership",
    }]
  },
  options: {
    legend: {display: true},
    title: {
          display: true,
          text: "Salary & Ownership"
        },
  }
});
  • 谢谢-谢谢
kmbjn2e3

kmbjn2e31#

您可以通过在每个数据集data中提供yAxisID来实现这一点。然后,在options.scales中提及每个y axisposition
在下面的代码中,我创建了两个y轴yAxis: yyAxis: y1,并提到了axis y的位置leftaxis y1的位置right
您可以在此处阅读更多关于多轴折线图的信息-link
第一个

相关问题