使用Chartkick添加注释

Posted 2021-04-09

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

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

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

答案

我为chartkick.js repo创建了一个pull请求，以添加您描述的功能。

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

这只适用于JS库（chartkick.js），但是这个方法可以在ruby库中使用来自此pull请求的修改过的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"]}
            });

另一答案

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

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

另一答案

如果你正在使用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);