Add annotations with Chartkick

问题

I want to add annotations to my time series chart. From Google's documentation: data.addColumn({type:'string', role:'annotation'});

How can I pass these column properties through Chartkick?

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

回答1:

I created a pull request to the chartkick.js repo to add the functionality you're describing.

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

This is just for the JS library (chartkick.js), but the approach can be used in the ruby library by using the modified chartkick.js from this pull request and passing in the right role values (certainty, annotation, etc.) to the library options.

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:

If you're using chartjs-plugin-annotation.js: https://github.com/chartjs/chartjs-plugin-annotation, then you need to use the library option which passes options from Chartkick through to the underlying chart provider, e.g. Chart.js.

Here's an example I got working to annotate a graph with a labelled vertical line:

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

If, for instance, you wanted a horizontal annotated line with e.g. a numerical value, use these values instead:

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

Ensure that you've registered the plugin first!

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

回答3:

Try something like this (not tested):

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

来源：https://stackoverflow.com/questions/35580320/add-annotations-with-chartkick

标签

ruby-on-rails

google-visualization

chartkick