Image-Chart ChartJs勾调不起作用？

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”：

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

我不能告诉您为什么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)
  },
  ...

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

null

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>

Answer 3

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

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

如果删除回调函数，它可以正常工作：https://image-charts.com/chart.js/2.8.0？bkg=white&c={%22Type%22:%22Line%22,%22Data%22:{%22Type%22:%22Line%22,%22Fill%22:false,%22BackgroundColor%22:%22RGBA(255,%2024,%201,%201)%22,%22BorderColor%22:%22RGBA(255,%2024,%201,%201)%22,%22PointRadius%22:0,%22Data%22:[67.0,65.0,70.0,81.0,83.0

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