时间戳

首页 > 解决方案 > 如何使用插件在 Charts.js 中旋转数据标签？

javascript - 如何使用插件在 Charts.js 中旋转数据标签？

问题描述

我正在尝试使用 Charts.js 在画布图中绘制风速。数据（风速和风向）来自 JSON URL。代码一切正常，情节如下所示：

在此处输入图像描述

我可以通过使用 Charts.js 中的插件、aformatter和一个rotation函数来添加箭头，但我想做的是让箭头根据来自 JSON 的风向角旋转。

JSON 文件的格式如下所示：

在此处输入图像描述

到目前为止，部分代码如下所示：

Current = Date.now();
$.getJSON("https://api.openweathermap.org/data/2.5/onecall?lat={LAT}&lon={LONG}&dt=" + Current + "&appid={MY API CODE}", function(data) {
      $.each(data.hourly, function(key, value) {
        var d = new Date(value.dt * 1000);
        minutes = "0" + d.getMinutes()
        var date_corrected = d.getFullYear() + "-" + [d.getMonth() + 1] + '-' + d.getDate() + ' ' + [d.getHours()] + ':' + minutes.substr(-2);
        dataOpen1.push({
          x: date_corrected,
          y: value.wind_speed
        });
        dataOpen2.push({
          x: date_corrected,
          y: value.wind_deg
        });

      });
      var WIND = new Chart(vant, {
          plugins: [ChartDataLabels],
          type: 'line',
          data: {
            labels: dataOpen1.map(x => x.x),
            datasets: [{
              data: dataOpen1.map(y => y.y),
              label: 'Viteza vantului ',
              borderColor: "#3e95cd",
              fill: true
            }, ]
          },
          options: {
            plugins: {
              datalabels: {
                backgroundColor: 'white',
                borderRadius: 20,
                borderWidth: 3,
                borderDashOffset: 20,
                color: 'black',
                font: {
                  size: 18
                },
                formatter: function(value) {
                  return '\u27a3'
                },
                rotation: function(ctx) {
                  return ctx.dataset.data[ctx.dataIndex] * 25;
                },
                padding: 0
              }
            },
          });
      });

所以我想从dataOpen2（风向）获取值并用它来设置每个数据集的箭头的旋转角度。我知道代码必须在这里：

rotation:
  function(ctx) {
.......
    return ctx.dataset.data[ctx.dataIndex] * 25;
  },

但我真的不知道该怎么做。

标签： javascripthtmljquerychartschart.js

解决方案

根据 github 存储库中 CHARTJS 的问题https://github.com/chartjs/Chart.js/issues/5667

您可能需要通过以下方式调整数据：

dataOpen1.push({
          x: date_corrected,
          y: value.wind_speed
          d: value.wind_deg
});

然后你可以使用 datalable 插件修改你的功能

rotation: function(ctx) { return ctx.dataset.data[ctx.dataIndex].d; }

推荐阅读