jquery 如何使用插件在Charts.js中旋转数据标签?

iyfjxgzm  于 2022-11-22  发布在  jQuery
关注(0)|答案(1)|浏览(130)

我 尝试 使用 Charts.js 在 画布 上 绘制 风速 。 数据 ( 风速 和 风向 ) 来自 JSON URL 。 代码 运行 正常 , 图 如下 所 示 :

我 可以 使用 Charts.js 中 的 插件 、 formatterrotation 函数 添加 箭头 , 但 我 想 做 的 是 根据 JSON 中 的 风向 Angular 旋转 箭头 。
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 ( 含 风向 ) 中 获取 值 , 并 使用 它 来 设置 每个 数据 集 的 箭头 旋转 Angular 。 我 知道 代码 必须 在 这里 :

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

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

omtl5h9j

omtl5h9j1#

根据 CHARTJS https://github.com/chartjs/Chart.js/issues/5667 的 github 存储 库 中 的 问题
您 可能 需要 以 下列 方式 调整 数据 :

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

中 的 每 一 个
然后 您 可以 使用 datalable 插件 修改 您 的 函数

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

格式

相关问题