使用 Chartkick 添加注释答案

【问题标题】：Add annotations with Chartkick使用 Chartkick 添加注释
【发布时间】：2016-02-23 14:34:28
【问题描述】：

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

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

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

【问题讨论】：

不熟悉“chartkick”，但需要将列添加到数据数组中，我猜是annotations_array。您可以分享更多代码吗？如果您只是想将现有的列值添加为注释，则可以使用视图。有关示例，请参见 labeling bars。

标签： ruby-on-rails google-visualization chartkick

【解决方案1】：

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

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

这仅适用于 JS 库 (chartkick.js)，但该方法可以在 ruby 库中使用，方法是使用此拉取请求中修改后的 chartkick.js 并传入正确的 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"]}
            });

【讨论】：

【解决方案2】：

如果您使用的是 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);

【讨论】：

【解决方案3】：

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

<%= 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'} %>

【讨论】：