Image-Chart ChartJs Ticks回调不工作?

Question

试图理解什么是不工作与图像图表在这个URL?

https://image-charts.com/chart.js/2.8.0?bkg=white&c={"type":"line"，"data":{"datasets":[{"type":"line";fill":false, backgroundColor":"rgba(255,24,1,1)"， borderColor";rgba(255,24,1，1)","pointRadius" 0,"data":[67.0, 65.0, 70.0, 81.0, 83.0, 81.0, 79.0, 74.0, 78.0, 77.0),"label":"Output"}],"labels":["00","05","10","15","20","25","30"]},"options":{"tooltips"{"intersect"假},"scales":{"xAxes"[{"gridLines"{"display"假},"ticks":{"callback"功能(价值,指数,值){回报"+价值;}}}],"yAxes":[{"gridLines"{"display"假}}]}}}

JSON:

{"type":"line","data":{"datasets":[{"type":"line","fill":false,"data":[59.0,57.0,57.0,58.0,57.0,56.0,57.0,55.0,62.0,63.0,62.0,62.0,69.0,63.0,62.0,61.0,62.0,62.0,66.0,69.0,72.0,72.0,75.0,82.0,84.0,85.0,84.0,81.0,91.0,90.0,87.0,87.0,89.0,90.0,90.0,86.0,86.0,86.0,86.0,83.0,83.0,82.0,81.0,85.0,89.0,85.0,83.0,87.0,81.0,81.0,81.0,91.0,90.0,81.0,87.0,83.0,98.0,90.0,81.0,88.0,88.0,88.0,88.0,90.0,90.0,90.0,92.0,90.0,91.0,90.0,88.0,81.0,83.0,91.0,88.0,87.0,87.0,87.0,87.0,87.0,87.0,87.0,88.0,90.0,87.0,88.0,91.0,88.0,86.0,86.0,87.0,86.0,91.0,90.0,91.0,92.0,91.0,91.0,88.0,87.0,88.0,95.0,94.0,92.0,92.0,91.0,88.0,88.0,90.0,88.0,90.0,87.0,87.0,88.0,88.0,91.0,88.0,91.0,94.0,90.0,90.0,88.0,88.0,87.0,88.0,87.0,88.0,86.0,86.0,87.0,87.0,88.0,90.0,88.0,79.0,74.0,83.0,85.0,83.0,85.0,85.0,85.0,85.0,85.0,83.0,90.0,85.0,85.0,85.0,85.0,85.0,86.0,87.0,87.0,91.0,90.0,90.0,90.0,90.0,90.0,86.0,85.0,85.0,86.0,86.0,86.0,86.0,85.0,85.0,86.0,86.0,85.0,85.0,83.0,85.0,87.0,85.0,86.0,88.0,88.0,88.0,86.0,91.0,92.0,88.0,85.0,87.0,86.0,86.0,85.0,86.0,86.0,87.0,87.0,88.0,87.0,92.0,88.0,83.0,85.0,87.0,87.0,90.0,85.0,87.0,87.0,86.0,85.0,85.0,87.0,87.0,88.0,90.0,91.0,86.0,87.0,87.0,86.0,90.0,87.0,90.0,90.0,94.0,92.0,91.0,87.0,87.0,88.0,90.0,91.0,92.0,90.0,86.0,88.0,87.0,87.0,88.0,87.0,88.0,88.0,87.0,88.0,87.0,87.0,87.0,88.0,88.0,91.0,90.0,90.0,91.0,91.0,87.0,90.0,92.0,87.0,86.0,88.0,88.0,88.0,88.0,92.0,92.0,81.0,78.0,79.0,83.0,86.0,87.0,88.0,87.0,87.0,85.0,85.0,87.0,87.0,87.0,87.0,86.0,86.0,85.0,86.0,86.0,85.0,85.0,87.0,86.0,88.0,90.0,91.0,90.0,95.0,97.0,98.0,95.0,97.0,97.0,97.0,97.0,98.0,95.0,95.0,108.0,95.0,95.0,95.0,91.0,78.0,83.0,82.0,92.0,89.0,88.0,85.0,86.0,94.0,94.0,97.0,99.0,99.0,97.0,95.0,91.0,92.0,94.0,95.0,92.0,94.0,94.0,95.0,92.0,94.0,94.0,95.0,95.0,92.0,94.0,97.0,95.0,95.0,94.0,102.0,104.0,99.0,98.0,95.0,94.0,91.0,94.0,94.0,91.0,92.0,91.0,92.0,97.0,94.0,92.0,91.0,97.0,95.0,109.0,112.0,112.0,112.0,110.0,112.0,112.0,109.0,110.0,112.0,109.0,105.0,104.0,102.0,100.0,105.0,102.0,102.0,105.0,107.0,105.0,105.0,104.0,104.0,105.0,107.0,102.0,104.0,104.0,102.0,105.0,105.0,104.0,104.0,107.0,104.0,102.0,105.0,105.0,105.0,105.0,105.0,105.0,107.0,105.0,102.0,104.0,104.0,104.0,105.0,107.0,105.0,109.0,109.0,109.0,109.0,105.0,107.0,107.0,107.0,105.0,105.0,110.0,112.0,107.0,107.0,105.0,105.0,109.0,107.0,107.0,107.0,109.0,105.0,109.0,110.0,109.0,110.0,107.0,112.0,117.0,110.0,109.0,116.0,114.0,112.0,112.0,110.0,110.0,109.0,104.0,112.0,116.0,114.0,116.0,112.0,112.0,112.0,112.0,112.0,110.0,109.0,105.0,112.0,114.0,110.0,110.0,114.0,116.0,112.0,107.0,112.0,107.0,110.0,109.0,110.0,107.0,109.0,110.0,114.0,110.0,110.0,114.0,112.0,112.0,116.0,117.0,117.0,117.0,114.0,114.0,109.0,109.0,110.0,107.0,109.0,110.0,109.0,109.0,107.0,112.0,112.0,112.0,112.0,114.0,110.0,107.0,109.0,110.0,109.0,110.0,114.0,112.0,109.0,114.0,110.0,112.0,114.0,116.0,110.0,112.0,112.0,119.0,121.0,119.0,117.0,114.0,110.0,114.0,107.0,107.0,107.0,109.0,105.0,104.0,105.0,105.0,104.0,104.0,102.0,104.0,105.0,102.0,105.0,102.0,107.0,104.0,109.0,109.0,109.0,109.0,109.0,109.0,107.0,107.0,109.0,109.0,112.0,110.0,110.0,110.0,112.0,109.0,110.0,107.0,107.0,112.0,110.0,109.0,109.0,109.0,114.0,112.0,109.0,107.0,112.0,109.0,110.0,107.0,110.0,112.0,112.0,109.0,105.0,105.0,105.0,109.0,107.0,110.0,109.0,109.0,107.0,107.0,107.0,112.0,114.0,109.0,109.0,107.0,107.0,105.0,107.0,107.0,105.0,105.0,104.0,107.0,116.0,114.0,112.0,112.0,112.0,110.0,110.0,107.0,95.0,94.0,80.0,83.0,85.0,92.0,98.0,100.0,98.0,98.0,97.0,100.0,104.0,107.0,105.0,102.0,100.0,100.0,100.0,102.0,102.0,100.0,104.0,107.0,105.0,107.0,104.0,102.0,104.0,102.0,102.0,102.0,104.0,117.0,98.0,102.0,104.0,104.0,102.0,100.0,100.0,104.0,107.0,107.0,104.0,104.0,104.0,104.0,102.0,104.0,104.0,104.0,107.0,110.0,112.0,112.0,109.0,105.0,119.0,104.0,91.0,88.0,95.0,105.0,104.0,104.0,104.0,102.0,109.0,105.0,100.0,102.0,104.0,104.0,105.0,104.0,105.0,102.0,104.0,104.0,102.0,102.0,100.0,104.0,104.0,109.0,105.0,104.0,114.0,116.0,112.0,110.0,110.0,112.0,107.0,112.0,109.0,107.0,107.0,107.0,107.0,105.0,104.0,104.0,102.0,102.0,107.0,105.0,105.0,107.0,102.0,105.0,107.0,109.0,112.0,109.0,107.0,104.0,105.0,105.0,107.0,105.0,107.0,105.0,105.0,109.0,107.0,107.0,107.0,105.0,105.0,110.0,110.0,109.0,105.0,105.0,104.0,107.0,104.0,104.0,104.0,102.0,104.0,104.0,107.0,105.0,102.0,102.0,104.0,105.0,102.0,107.0,105.0,107.0,104.0,107.0,105.0,102.0,104.0,102.0,105.0,105.0,107.0,107.0,109.0,107.0,109.0,107.0,109.0,109.0,109.0,110.0,109.0,107.0,105.0,105.0,107.0,110.0,107.0,109.0,105.0,109.0,107.0,109.0,109.0,110.0,109.0,104.0,104.0,110.0,112.0,112.0,114.0,117.0,112.0,114.0,112.0,112.0,110.0,121.0,117.0,117.0,112.0,114.0,116.0,110.0,109.0,112.0,110.0,110.0,107.0,105.0,105.0,105.0,105.0,100.0,107.0,105.0,105.0,105.0,109.0,105.0,107.0,102.0,102.0,107.0,104.0,105.0,104.0,100.0,102.0,102.0,102.0,107.0,107.0,105.0,102.0,98.0,102.0,105.0,105.0,107.0,109.0,107.0,100.0,100.0,98.0,100.0,100.0,102.0,102.0,102.0,102.0,104.0,107.0,104.0,107.0,105.0,102.0,105.0,107.0,112.0,107.0,107.0,107.0,105.0,105.0,105.0,109.0,109.0,107.0,109.0,110.0,109.0,107.0,107.0,102.0,102.0,107.0,112.0,112.0,112.0,112.0,109.0,105.0,109.0,109.0,109.0,116.0,110.0,107.0,107.0,116.0,110.0,104.0,107.0,107.0,110.0,116.0,116.0,119.0,112.0,112.0,109.0,109.0,107.0,110.0,114.0,112.0,110.0,116.0,109.0,110.0,110.0,116.0,110.0,109.0,110.0,107.0,107.0,105.0,107.0,114.0,109.0,109.0,105.0,105.0,102.0,109.0,109.0,105.0,107.0,105.0,104.0,105.0,109.0,107.0,105.0,112.0,114.0,112.0,114.0,116.0,118.0,115.0,115.0,115.0,116.0,122.0,118.0,116.0,115.0,113.0,113.0,113.0,116.0,118.0,118.0,120.0,118.0,115.0,109.0,111.0,116.0,113.0,111.0,113.0,120.0,118.0,115.0,115.0,113.0,115.0,111.0,111.0,107.0,107.0,106.0,107.0,106.0,107.0,111.0,116.0,115.0,109.0,111.0,111.0,109.0,109.0,113.0,111.0,113.0,111.0,109.0,107.0,107.0,109.0,107.0,109.0,109.0,107.0,107.0,109.0,107.0,106.0,106.0,106.0,107.0,106.0,104.0,104.0,111.0,107.0,104.0,104.0,104.0,106.0,106.0,104.0,107.0,107.0,104.0,109.0,124.0,120.0,115.0,115.0,113.0,111.0,113.0,113.0,118.0,115.0,116.0,115.0,115.0,115.0,115.0,113.0,115.0,113.0,99.0,96.0,104.0,109.0,107.0,107.0,111.0,111.0,111.0,113.0,113.0,118.0,116.0,115.0,111.0,109.0,109.0,107.0,109.0,115.0,111.0,111.0,113.0,115.0,111.0,107.0,107.0,109.0,111.0,115.0,115.0,111.0,109.0,113.0,116.0,115.0,115.0,120.0,116.0,120.0,115.0,111.0,113.0,111.0,113.0,109.0,107.0,111.0,106.0,107.0,113.0,111.0,115.0,111.0,107.0,107.0,111.0,113.0,109.0,106.0,107.0,109.0,109.0,109.0,107.0,106.0,107.0,109.0,111.0,107.0,107.0,111.0,113.0,107.0,109.0,115.0,109.0,111.0,107.0,107.0,111.0,109.0,111.0,111.0,111.0,109.0,111.0,113.0,115.0,111.0,116.0,111.0,106.0,111.0,107.0,109.0,106.0,106.0,107.0,104.0,104.0,109.0,109.0,107.0,106.0,106.0,107.0,111.0,109.0,113.0,111.0,107.0,111.0,111.0,109.0,109.0,111.0,115.0,113.0,111.0,115.0,115.0,113.0,111.0,116.0,115.0,115.0,113.0,113.0,113.0,113.0,113.0,115.0,116.0,116.0,116.0,113.0,113.0,109.0,109.0,115.0,109.0,100.0,96.0,89.0,107.0,104.0,104.0,109.0,106.0,111.0,109.0,104.0,107.0,109.0,107.0,107.0,104.0,107.0,109.0,109.0,109.0,115.0,113.0,109.0,113.0,109.0,107.0,106.0,106.0,109.0,106.0,104.0,106.0,106.0,107.0,107.0,106.0,109.0,111.0,109.0,111.0,111.0,107.0,111.0,109.0,111.0,109.0,106.0,102.0,106.0,104.0,102.0,102.0,102.0,104.0,109.0,109.0,106.0,107.0,109.0,113.0,115.0,107.0,107.0,109.0,102.0,104.0,106.0,106.0,107.0,106.0,111.0,111.0,107.0,106.0,104.0,107.0,106.0,104.0,109.0,111.0,111.0,113.0,107.0,104.0,106.0,107.0,109.0,113.0,109.0,111.0,116.0,116.0,115.0,107.0,107.0,113.0,109.0,106.0,102.0,104.0,109.0,107.0,107.0,106.0,104.0,102.0,107.0,106.0,104.0,102.0,104.0,104.0,102.0,104.0,111.0,113.0,113.0,107.0,109.0,109.0,109.0,104.0,106.0,106.0,109.0,115.0,113.0,113.0,111.0,111.0,111.0,106.0,109.0,106.0,106.0,102.0,102.0,102.0,102.0,100.0,102.0,100.0,100.0,99.0,97.0,99.0,100.0,100.0,99.0,100.0,99.0,102.0,104.0,102.0,99.0,99.0,102.0,102.0,100.0,97.0,97.0,97.0,97.0,100.0,99.0,111.0,111.0,109.0,107.0,104.0,115.0,111.0,111.0,113.0,115.0,113.0,115.0,109.0,109.0,111.0,109.0,107.0,107.0,104.0,106.0,116.0,115.0,111.0,111.0,106.0,106.0,111.0,107.0,111.0,111.0,109.0,106.0,106.0,104.0,102.0,104.0,104.0,106.0,104.0,104.0,102.0,100.0,104.0,102.0,100.0,99.0,99.0,100.0,99.0,100.0,100.0,100.0,99.0,100.0,97.0,99.0,97.0,102.0,100.0,100.0,100.0,99.0,99.0,97.0,99.0,97.0,99.0,96.0,97.0,96.0,97.0,96.0,100.0,104.0,100.0,104.0,102.0,106.0,106.0,104.0,104.0,102.0,99.0,113.0,115.0,109.0,107.0,111.0,111.0,113.0,109.0,109.0,109.0,115.0,124.0,124.0,115.0,118.0,116.0,115.0,113.0,122.0,120.0,116.0,122.0,118.0,118.0,120.0,109.0,113.0,115.0,111.0,113.0,113.0,115.0,116.0,113.0,115.0,118.0,115.0,113.0,113.0,109.0,107.0,113.0,109.0,107.0,107.0,107.0,109.0,106.0,107.0,113.0,118.0,122.0,122.0,118.0,118.0,122.0,120.0,118.0,113.0,115.0,115.0,111.0,120.0,60.0,116.0,115.0,115.0,115.0,113.0,113.0,113.0,115.0,111.0,113.0,109.0,113.0,111.0,109.0,99.0,100.0,96.0,99.0,102.0,109.0,102.0,104.0,111.0,107.0,107.0,104.0,107.0,109.0,107.0,102.0,104.0,107.0,109.0,107.0,106.0,107.0,107.0,107.0,107.0,106.0,111.0,106.0,104.0,107.0,111.0,111.0,107.0,113.0,109.0,111.0,109.0,104.0,106.0,107.0,107.0,109.0,111.0,113.0,109.0,107.0,107.0,109.0,111.0,113.0,111.0,107.0,109.0,109.0,106.0,113.0,109.0,111.0,109.0,106.0,109.0,111.0,107.0,106.0,107.0,111.0,113.0,111.0,109.0,107.0,109.0,109.0,109.0,115.0,115.0,109.0,116.0,113.0,109.0,111.0,116.0,120.0,113.0,111.0,113.0,113.0,111.0,113.0,111.0,109.0,107.0,115.0,115.0,111.0,113.0,107.0,107.0,109.0,109.0,111.0,111.0,111.0,111.0,111.0,113.0,111.0,113.0,115.0,111.0,115.0,111.0,111.0,111.0,111.0,109.0,113.0,115.0,111.0,109.0,106.0,109.0,106.0,109.0,106.0,111.0,111.0,113.0,111.0,111.0,113.0,111.0,111.0,109.0,111.0,109.0,107.0,107.0,107.0,111.0,109.0,113.0,115.0,111.0,109.0,109.0,109.0,116.0,116.0,115.0,115.0,113.0,109.0,106.0,107.0,107.0,107.0,106.0,104.0,104.0,107.0,107.0,106.0,104.0,102.0,102.0,104.0,102.0,102.0,106.0,106.0,104.0,102.0,100.0,111.0,109.0,115.0,128.0,128.0,120.0,120.0,120.0,115.0,116.0,115.0,115.0,118.0,120.0,120.0,124.0,115.0,118.0,113.0,111.0,115.0,113.0,113.0,113.0,109.0,107.0,113.0,111.0,113.0,109.0,111.0,107.0,106.0,107.0,111.0,111.0,109.0,111.0,111.0,109.0,106.0,106.0,104.0,104.0,106.0,107.0,111.0,109.0,106.0,106.0,109.0,107.0,106.0,111.0,115.0,111.0,109.0,113.0,115.0,115.0,109.0,109.0,111.0,111.0,109.0,120.0,115.0,113.0,115.0,116.0,111.0,109.0,113.0,116.0,118.0,106.0,99.0,89.0,97.0,99.0,100.0,107.0,104.0],"label":"Output"}]},"options":{}}

Answer 1

Image-Charts创始人，出于安全和可靠性的考虑，我们的Charts API目前还不支持JavaScript函数。

PS:我们可能会根据客户需求在以后添加JavaScript函数支持:)

Answer 2

你得到的错误是它不是有效的json。

据我所知JSON不支持函数，所以你必须删除回调，并确保刻度已经正确之前，你发送你的数据到image-chart。

如果你删除回调函数，它工作正常:https://image-charts.com/chart.js/2.8.0?bkg=white& c ={% 22类型% 22:% % 22 22行,% 22数据% 22:{% 22集% 22:[{% 22类型% 22:% % 22 22行,% 22填补% 22:假的,% 22写成backgroundcolor % 22: % 22 rgba(% 2024, 255年201年%,% 201)% 22,% 22 bordercolor % 22: % 22 rgba(% 2024, 255年201年%,% 201)% 22,% 22 pointradius % 22:0, % 22数据% 22:[67.0,65.0,70.0,81.0,83.0,81.0,79.0,74.0,78.0,77.0),% 22标签% 22:% 22输出% 22}),% 22标签% 22:[% 22 2200%,% 22 2205%,% 22 2210%,% 22 2215%,% 22 2220%,% 22 2225%,2230% % 22]},% 22选项% 22:{% 22工具提示% 22:{% 22相交% 22:假},% 22 scales % 22: {% 22 xaxes % 22:[{% 22网格线% 22:{% 22显示% 22:假}}),% 22 yaxes % 22:[{% 22网格线% 22:{% 22显示% 22:假}}]}}}

如果你真的需要回调的功能，你将不得不实现库的正常版本，在那里你的原始配置是按预期工作的。

Answer 3

我不能告诉你为什么image-charts.com不接受你的请求，但从chart .js的角度来看，你的图表配置看起来几乎很好，包括ticks.callback。我能看到的唯一问题是data.labels不包含与data.datasets[0].data相同数量的项目。

x轴ticks.callback的假定问题是，您返回string值与空字符串组合，这与没有ticks.callback产生相同的结果。

"ticks": {
"callback": function(value, index, values) {
return '' + value;
}
}

不确定你所期望的，但请注意x轴刻度是出现在图表底部的刻度。

如果您想在y轴上格式化打号标签，您可以使用以下命令(参见https://stackoverflow.com/a/1726662/2358409):

)

"yAxes": [{
"ticks": {
"callback": value => value.toFixed(1)
},
...

请看看下面的可运行代码，看看它是如何工作的。

new Chart(document.getElementById('myChart'), {
"type": "line",
"data": {
"datasets": [{
"type": "line",
"fill": false,
"backgroundColor": "rgba(255, 24, 1, 1)",
"borderColor": "rgba(255, 24, 1, 1)",
"pointRadius": 0,
"data": [67.0, 65.0, 70.0, 81.0, 83.0, 81.0, 79.0, 74.0, 78.0, 77.0],
"label": "Output"
}],
"labels": ["00", "05", "10", "15", "20", "25", "30"]
},
"options": {
"tooltips": {
"intersect": false
},
"scales": {
"xAxes": [{
"gridLines": {
"display": false
}        
}],
"yAxes": [{
"ticks": {
"callback": value => value.toFixed(1)
},
"gridLines": {
"display": false
}
}]
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>