使用 Chartkick 和图表 js 的 Rails 双轴答案

【问题标题】：Rails dual axis using Chartkick and chart js使用 Chartkick 和图表 js 的 Rails 双轴
【发布时间】：2023-04-03 00:15:01
【问题描述】：

我正在尝试将Chartkick 与Chart.js 适配器一起使用，并尝试制作一个简单的双轴图表，但我的设置似乎都不起作用。我知道这只是格式问题，但我感觉好像我已经尝试了所有方法，但都没有运气。

我的数据是这种格式，如您所见，我已将yAxisID 添加到每个数据集。

@consultations = [{:name=>nil,
  :data=>
   [[Fri, 01 Dec 2017, 346],
    [Mon, 01 Jan 2018, 99],
    [Thu, 01 Feb 2018, 282],
    [Thu, 01 Mar 2018, 267],
    [Sun, 01 Apr 2018, 335],
  :yAxisID=>"y"},
 {:name=>"check with spouse",
  :data=>
   [[Fri, 01 Dec 2017, 0],
    [Mon, 01 Jan 2018, 1],
    [Thu, 01 Feb 2018, 9],
    [Thu, 01 Mar 2018, 13],
    [Sun, 01 Apr 2018, 19],
  :yAxisID=>"y1"},
 {:name=>"too busy",
  :data=>
   [[Fri, 01 Dec 2017, 0],
    [Mon, 01 Jan 2018, 1],
    [Thu, 01 Feb 2018, 0],
    [Thu, 01 Mar 2018, 3],
    [Sun, 01 Apr 2018, 1],
  :yAxisID=>"y1"},
 {:name=>"made post consultation",
  :data=>
   [[Fri, 01 Dec 2017, 0],
    [Mon, 01 Jan 2018, 2],
    [Thu, 01 Feb 2018, 4],
    [Thu, 01 Mar 2018, 14],
    [Sun, 01 Apr 2018, 12],
  :yAxisID=>"y1"}
  ...
]

当我绘制图表时，legend 位置会更新，但只有 1 个 y 轴，并且绘制的所有数据都不会改变：

<%= line_chart @consultations, legend: true, library: {
    legend: { position: 'top' },
    scales: {
        y: {
            type: 'linear',
            display: true,
            position: 'left',
        },
        y1: {
            type: 'linear',
            display: true,
            position: 'right',
        }
    }
}, id: 'consult-chart', adapter: 'chartjs' %>

【问题讨论】：

标签： ruby-on-rails chart.js chartkick

【解决方案1】：

您需要确保以正确的格式传递scales。 See this example of using Axis IDs in the docs. IE。 scales 需要包含一个带有轴对象数组的 yAxes 字段，并且每个轴对象都有一个 id 字段，该字段与您的数据集中的一个 ID 匹配。

所以，你应该把你的代码改成这样：

<%= line_chart @consultations, legend: true, library: {
    legend: { position: 'top' },
    scales: {
        yAxes: [
            {
                id: 'y',
                type: 'linear',
                display: true,
                position: 'left',
            },
            {
                id: 'y1',
                type: 'linear',
                display: true,
                position: 'right',
            }
        ]
    }
}, id: 'consult-chart', adapter: 'chartjs' %>

【讨论】：