Image-Chart ChartJs 滴答回调不起作用？

如何解决Image-Chart ChartJs 滴答回调不起作用？

想了解在此 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,"pointRadius":0,"data":[67.0,77.0],"label":"Output"}],"labels":["00","05","10","15","20","25","30"]},"options":{"tooltips":{"intersect":false},"scales":{"xAxes":[{"gridLines":{"display":false},"ticks":{"callback":function(value,index,values) { return '' + value;}}}],"yAxes":[{"gridLines":{"display":false}}]}}}

JSON：

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

解决方法

Image-Charts 创始人在这里，确实出于安全和可靠性原因，我们的 Charts API 目前不支持 JavaScript 函数。

PS：我们以后可能会根据客户的需求添加 JavaScript 功能支持 :)

,

我无法告诉您为什么 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,"pointRadius": 0,"data": [67.0,65.0,70.0,81.0,83.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>

,

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

据我所知，JSON 不支持函数，因此在将数据发送到图像图表之前，您必须删除回调并确保刻度已经正确。

如果你删除回调函数它工作正常：https://image-charts.com/chart.js/2.8.0?bkg=white&c={%22type%22:%22line%22,%22data%22:{%22datasets%22:[{%22type%22:%22line%22,%22data%22:[67.0,%22label%22:%22Output%22}],%22labels%22:[%2200%22,%2230%22]},%22options%22:{%22tooltips%22:{%22intersect%22:false},%22scales%22:{%22xAxes%22:[{%22gridLines%22:{%22display%22:false}}],%22yAxes%22:[{%22gridLines%22:{%22display%22:false}}]}}}

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