使用 Chartkick 和圖表 js 的 Rails 雙軸

Question

我正在嘗試將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' %>

Answer 1

您需要確保以正確的格式傳遞scales 。 請參閱文檔中使用軸 ID 的示例。 即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' %>