首页 > 解决方案 > 为什么可拖动插件不适用于 ChartJS 中的雷达图?

问题描述

目前我正在构建一个前端应用程序,它使用 AirQuality 等数据和有关 POI 的信息。为了显示单点的评级,我使用了带有 ChartJS 的雷达图(有史以来第一次使用它!)。

我已经可以使用输入数据更改图表,单击按钮后将其推送到图表。我想实现的另一个功能是可以拖动雷达图的端点来更改值。

我找到了可拖动插件并尝试实现它,但它并没有像我想象的那样工作。

这是我第一次使用 chartJS,我发现自己对有关插件的文档感到困惑。

我正在使用纯 JavaScript。根本没有框架。

这是我的图表的代码:

 var data = {
  labels: ["Air", "POI", "Noise"],
    datasets: [{
        backgroundColor: "#50237f",
        borderColor: "#50237f",
        data: [33.3333333333, 33.3333333333, 33.3333333333],
        label: 'Rating'
    }]
};

var options = {
  scale: {
    ticks: {
      min: 0,
      max: 100,
      stepSize: 25,
      showLabelBackdrop: false
    }
  },
    maintainAspectRatio: true,
    spanGaps: false,
    elements: {
        line: {
            tension: 0.000001
        }
    },

};

var ctx = document.getElementById("ratingChart");
var myChart = new Chart(ctx, {
  type: 'radar',
    data: data,
    options: options,
  config: {
    plugins: {
      // maybe set the plugin here? but how?
    }
  }
});

标签: javascriptchart.js

解决方案


推荐阅读