Блог

Итак, API Google charts скоро устареет, и мы переходим с него на 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?
amp;chxl=0:||#{d2}|#{i2}|#{s2}|#{c2}||1:||D|I|S|C|
amp;chxr=2,0,220amp;chxs=0,000000,13.5,0,l|1,000000,13.5,0,l|2,676767,10,0,lt
amp;chxt=x,t
amp;chf=bg,s,00000000|c,ls,90,CCCCCC,0.05,FFFFFF,0.90,CCCCCC,0.05
amp;chs=#{size}amp;cht=lxy
amp;chco=000000amp;chds=0,5,0,220
amp;chdlp=bamp;chls=3amp;chma=10,25,10,25
amp;chg=20,0,0
amp;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
amp;chts=000000,10
amp;chtt=#{title}
amp;chd=t:1,2,3,4|#{d},#{i},#{s},#{c}"
  

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

Это то, что у меня пока есть:

Подводя итог:

Возможно ли добиться такого с помощью Chart.js Chartkick? Если да, то как? И если нет, каковы мои альтернативы?