小编Ale*_*ski的帖子

有没有办法在非顺序轴上包含刻度线/网格线?另外,是否可以添加边框样式和自定义刻度位置?

因此,Google Charts API即将被弃用,我们正从它迁移到chartkick + chart.js。

我刚刚加入这个项目,只是换了一个开发团队,所以我还很陌生,这使事情变得更加复杂。

无论如何,例如,在使用Chart.js时,在保持与旧图形相同的样式方面遇到了一些问题,例如:

根据客户的说法,旧的图表(下面是检查图像,以获取更多上下文)具有一些必不可少的元素,我无法复制:

  • 两个V轴标签,一个在上面,一个在下面。
  • X轴的未堆积值(例如,如果x轴有两个“ 1”值,则它们最终会堆积,这是我不希望的)
  • X轴无序
  • 自定义刻度线和刻度线宽度
  • 自定义边框(顶部和底部的灰线)
  • 垂直网格

我尝试使用Chart.js中的多个选项,包括ticks:gridlinesstacked: 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'
                    }
                  }]
                 }
               }
Run Code Online (Sandbox Code Playgroud)

McGyverism提到的数据(用于显示标签)可以避免堆叠/问题:

["D: #{label_value}": calculated_value],
["I: #{label_value}": calculated_value]...
Run Code Online (Sandbox Code Playgroud)

如果有帮助,请使用以下旧的API调用参数:

标签值为d2,i2,s2和c2,而d,i,s,c为实际图形点(在显示标签之前已对标签进行了一些计算) …

ruby chartkick chart.js

5
推荐指数
0
解决办法
104
查看次数

标签 统计

chart.js ×1

chartkick ×1

ruby ×1