Есть ли способ включить тики / линии сетки на непоследовательной оси? Кроме того, возможно ли добавить стиль рамки и пользовательские позиции галочек? - PullRequest
Новая
       28

Есть ли способ включить тики / линии сетки на непоследовательной оси? Кроме того, возможно ли добавить стиль рамки и пользовательские позиции галочек?

4 голосов
/ 29 марта 2019

Итак, Google charts API скоро устареет, и мы переходим с него на chartkick + chart.js.

Я только что присоединился к проекту в составе команды разработчиков, поэтому я довольно новичок в этом, что еще более усложняет ситуацию.

Во всяком случае, я столкнулся с некоторыми проблемами при сохранении того же стиля, что и старые графики, при использовании Chart.js, например:

На старых графиках (см. Изображения ниже, для большего контекста) есть некоторые элементы, которые, по мнению клиента, необходимы, которые я просто не могу воспроизвести:

  • две метки оси V, одна сверху и одна снизу.
  • непакетированные значения для оси X (например, если для оси X есть два значения '1', они заканчивают суммированием, что мне не нужно)
  • неупорядоченная ось X
  • пользовательские галочки и ширина галочки
  • Пользовательские границы (серые линии сверху и снизу)
  • вертикальные сетки

Я пытался использовать несколько опций из Chart.js, в том числе ticks:, gridlines и stacked: false, в нескольких различных конфигурациях, но пока без кубиков.

Это текущий код, который я использую (включая некоторые данные McGyverism) для отображения диаграмм: 

    line_chart data,
      library: {
                 showLines: true,
                 tooltips: { enabled: false },
                 title: {
                   display: true,
                   text: graph_title(graph_number, type),
                   fontSize: 11
                 },
                 scales: {
                  yAxes: [{
                    ticks: {
                      display: false,
                      stepSize: steps,
                    }
                  }],
                  xAxes: [{
                    ticks: {
                      display: ticks,
                      fontSize: 9,
                      fontStyle: 'bold'
                    }
                  }]
                 }
               }

Упомянутые McGyverism данные, предназначенные для отображаемых ярлыков, позволяют обойти сложение / проблему: 

["D: #{label_value}": calculated_value],
["I: #{label_value}": calculated_value]...

Если это поможет, вот старые параметры вызова API:

Будучи d2, i2, s2 и c2 значениями меток, а d, i, s, c фактическими точками графика (некоторые метки выполняются с метками перед их отображением) 

chart?
&chxl=0:||#{d2}|#{i2}|#{s2}|#{c2}||1:||D|I|S|C|
&chxr=2,0,220&chxs=0,000000,13.5,0,l|1,000000,13.5,0,l|2,676767,10,0,lt
&chxt=x,t
&chf=bg,s,00000000|c,ls,90,CCCCCC,0.05,FFFFFF,0.90,CCCCCC,0.05
&chs=#{size}&cht=lxy
&chco=000000&chds=0,5,0,220
&chdlp=b&chls=3&chma=10,25,10,25
&chg=20,0,0
&chm=o,000000,0,-1,10|h,CCCCCC,0,0.5,3,-1|h,CCCCCC,0,0.41,1,-1|h,CCCCCC,0,0.59,1,-1
&chts=000000,10
&chtt=#{title}
&chd=t:1,2,3,4|#{d},#{i},#{s},#{c}"

Это то, что хочет клиент:

expected

Вот что я получил до сих пор:

current

Подведем итог:

Можно ли добиться этого, используя Chart.js + Chartkick? Если так, то как? А если нет, каковы мои альтернативы?

...