ruby-on-rails 使用Chartkick添加注解

sqyvllje  于 2023-02-14  发布在  Ruby
关注(0)|答案(4)|浏览(134)

我想在时间序列图表中添加注解。来自Google文档:data.addColumn({type:'string', role:'annotation'});
如何通过Chartkick传递这些列属性?
<%= line_chart [{name: 'annotations', data: annotations_array},{name: 'numbers as a time series', data: 'numeric_array'}] %>

atmip9wb

atmip9wb1#

我创建了一个到chartkick.js repo的拉取请求,以添加您所描述的功能。
https://github.com/ankane/chartkick.js/pull/58
这只适用于JS库(chartkick.js),但是通过使用来自这个pull请求的修改后的chartkick.js并将正确的role值(certaintyannotation等)传递给library选项,可以在ruby库中使用该方法。

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"]}
            });
syqv5f0l

syqv5f0l2#

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

js5cn81o3#

尝试类似这样的操作(未测试):
<%= 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'} %>

woobm2wo

woobm2wo4#

2022年,插件版本为1.4.0,工作配置如下:

library:
  {
    plugins: 
     {
       annotation: 
      {
        annotations: 
        {
          line1: 
         {
           type: 'line', 
           xMin: "2022-06-01", 
           xMax: "2022-06-01", 
           borderColor: 'rgb(255, 99, 132)', 
           borderWidth: 2
         }
       }
      }
     }
   }

没有plugins键不起作用。
您必须在app/javascript/application.js中注册一个新插件(如果是Rails应用程序):

import { Chart } from 'chart.js';

// Make annotations for charts
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

然后在视图中,您可以像这样使用它:

= line_chart @some_records, curve: false, prefix: "EUR ", thousands: "'", points: false,
        library: {plugins: {annotation: {annotations: {line1: {type: 'line', xMin: Date.today.beginning_of_month.to_s, xMax: Date.today.beginning_of_month.to_s, borderColor: 'rgb(105,105,105)', borderWidth: 1}}}}}

相关问题