Rails 双轴使用 Chartkick 和图表 js

Question

我正在尝试使用 Chartkick with the Chart.js 适配器并尝试制作一个简单的双轴图表，但我的 none 设置似乎有效。我知道这只是一个格式问题，但我觉得我已经尝试了所有方法，但没有成功。

我的数据是这种格式，如您所见，我已将 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' %>

Answer 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' %>

Rails 双轴使用 Chartkick 和图表 js

Rails dual axis using Chartkick and chart js

ruby-on-rails

chartkick

chart.js