我 尝试 使用 Charts.js 在 画布 上 绘制 风速 。 数据 ( 风速 和 风向 ) 来自 JSON URL 。 代码 运行 正常 , 图 如下 所 示 :
我 可以 使用 Charts.js 中 的 插件 、 formatter
和 rotation
函数 添加 箭头 , 但 我 想 做 的 是 根据 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;
},
格式
但 我 真 的 不 知道 该 怎么 做 。
1条答案
按热度按时间omtl5h9j1#
根据 CHARTJS https://github.com/chartjs/Chart.js/issues/5667 的 github 存储 库 中 的 问题
您 可能 需要 以 下列 方式 调整 数据 :
中 的 每 一 个
然后 您 可以 使用 datalable 插件 修改 您 的 函数
格式