作者:蜃海 | 来源:互联网 | 2022-11-02 01:29
因此,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是否可以实现这样的目标?如果是这样,怎么办?如果没有,我有什么选择?