使用 Chartkick 添加注释

Question

我想为我的时间序列图表添加注释。来自 Google 的文档： data.addColumn({type:'string', role:'annotation'});

如何通过 Chartkick 传递这些列属性？

<%= line_chart [{name: 'annotations', data: annotations_array},{name: 'numbers as a time series', data: 'numeric_array'}] %>

Answer 1

尝试这样的事情（未测试）：

<%= line_chart TABLE.group(XXX).where(XXX), library: {name: 'annotations', data: annotations_array, name: 'numbers as a time series', data: 'numeric_array', type:'string', role:'annotation'} %>

Answer 2

我向 chartkick.js 存储库创建了一个拉取请求以添加您描述的功能。

https://github.com/ankane/chartkick.js/pull/58

这仅适用于 JS 库 (chartkick.js)，但通过使用此拉取请求中修改后的 chartkick.js 并传入，可以在 ruby 库中使用该方法role 值（certainty、annotation 等）到 library 选项。

var data = [..., [Sat Mar 05 2016 17:13:22 GMT-0800 (PST), 1, false, "cool annotation"]];
new Chartkick.LineChart("chart-1", data, {
            "library": 
              {"role":["certainty", "annotation"]}
            });

Answer 3

如果您使用的是 chartjs-plugin-annotation.js： https://github.com/chartjs/chartjs-plugin-annotation，那么您需要使用 library 选项将选项从 Chartkick 传递到底层图表提供程序，例如Chart.js.

这是我用带标签的垂直线注释图表的示例：

<%=
  line_chart profit_chart_path(staff), xtitle: 'Day', ytitle: 'Profit',
    library: {
      annotation: {
        annotations: [
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 'May 2018',
            label: {
              content: 'My Vertical Line',
              enabled: true
            }
          }
        ]
      }
    }
%>

例如，如果您想要一条带注释的水平线，例如数值，请改用这些值：

mode: 'horizontal',
scaleID: 'y-axis-0',
value: 20,

确保您已先注册插件！

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(ChartAnnotationsPlugin);

使用 Chartkick 添加注释

Add annotations with Chartkick

ruby-on-rails

google-visualization

chartkick