Добавляйте аннотации с помощью Chartkick

Я хочу добавить аннотации к моей диаграмме временных рядов. Из документации Google: data.addColumn({type:'string', role:'annotation'});

Как я могу передать эти свойства столбца через Chartkick?

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


ruby-on-rails google-visualization chartkick
person sso777    schedule 23.02.2016    source источник
comment
не знаком с chartkick, но столбец нужно добавить в массив данных, который, как я предполагаю, annotations_array. есть ли еще код, которым вы можете поделиться? если вы просто хотите добавить существующие значения столбцов в качестве аннотаций, можно использовать представление. см. пример маркировки столбцов.   -  person WhiteHat    schedule 23.02.2016

Ответы (3)


arrow_upward
1
arrow_downward

Я создал запрос на включение в репозиторий 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"]}
            });
person Armando Canals    schedule 07.03.2016

arrow_upward
1
arrow_downward

Если вы используете chartjs-plugin-annotation.js: https://github.com/chartjs/chartjs-plugin-annotation, то вам нужно использовать параметр library, который передает параметры от Chartkick базовому поставщику диаграмм, например. Диаграмма.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);
person stwr667    schedule 30.04.2019

arrow_upward
0
arrow_downward

Попробуйте что-то вроде этого (не проверено):

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

person CottonEyeJoe    schedule 23.02.2016