时间戳

首页 > 解决方案 > 使用 Chartkick 和图表 js 的 Rails 双轴

ruby-on-rails - 使用 Chartkick 和图表 js 的 Rails 双轴

问题描述

我正在尝试将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-railschart.jschartkick

解决方案

您需要确保以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' %>

推荐阅读