用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

我为chartkick.js回购创建了一个拉请求，以添加您所描述的功能。

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

这仅适用于JS库( chartkick.js )，但是这种方法可以通过使用来自这个拉请求的修改后的chartkick.js并传递正确的role值(certainty、annotation等)在ruby库中使用。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 2

如果您使用chartjs-plugin.js：https://github.com/chartjs/chartjs-plugin-annotation，那么您需要使用library选项，它将选项从Chart踢传递到底层图表提供程序，例如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);

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