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

Question

因此，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}"

这是客户想要的：

这是我到目前为止得到的：

总结：

使用Chart.js + Chartkick是否可以实现这样的目标？如果是这样，怎么办？如果没有，我还有什么选择？