javascript - 为什么可拖动插件不适用于 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?
}
}
});
解决方案
推荐阅读
- wcf - PowerShell WCF“基础连接已关闭:接收时发生意外错误。”
- android - 让 Android 模拟器与 iPhone 热点一起工作
- c# - OpenOCD Tcl 接口
- r - 复制数据框中的每一行的次数等于该行中的值出现在另一个数据框中的次数?
- python - 将数组中的项目添加到 Web 表单
- python - Ansible - 以非root用户身份执行任务不起作用
- xamarin.forms - Xamarin 表单选择器值绑定
- vue.js - Vuetify 数据表 - 手动显示可扩展行
- python - 使用系列从数据框中获取值
- c# - 在线共享点的 CSOM 问题