javascript - Leaflet JS中条形图的控制层
问题描述
这是我的第一个网络地图。为了可视化我的一个数据,我正在使用小册子小图表。我成功地展示了条形图。现在我尝试为我的条形图制作一个控制层。但它说 Uncaught ReferenceError: barChartMarker is not defined。如何解决这个问题?这是我的代码:
forEach(bar => {
var options = {
data: [
bar.ASKES / 3,
bar.BPJS / 3,
bar.KIS / 3
],
chartOptions: {
'dataPoint1': {
fillColor: '#FEE5D9',
minValue: 0,
maxValue: 30,
maxHeight: 30,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint2': {
fillColor: '#FCAE91',
minValue: 0,
maxValue: 30,
maxHeight: 30,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint3': {
fillColor: '#FB6A4A',
minValue: 0,
maxValue: 30,
maxHeight: 30,
displayText: function (value) {
return value.toFixed(2);
}
}
}
},
weight: 1,
color: '#000000',
}
var barChartMarker = L.minichart(bar.location, options);
map.addLayer(barChartMarker);
})
var overlays = {
"Barchart": barChartMarker
};
L.control.layers(overlays).addTo(map);
解决方案
您不能从外部访问在函数内部定义的变量。
改成:
var barChartGroup = L.featureGroup().addTo(map);
var overlays = {
"BarChart" : barChartGroup
};
forEach(bar => {
var options = {
data: [
bar.ASKES / 3,
bar.BPJS / 3,
bar.KIS / 3
],
chartOptions: {
'dataPoint1': {
fillColor: '#FEE5D9',
minValue: 0,
maxValue: 30,
maxHeight: 30,
}
}
.....
weight: 1,
color: '#000000',
}
var barChartMarker = L.minichart(bar.location, options);
barChartGroup.addLayer(barChartMarker);
})
L.control.layers(overlays).addTo(map);
推荐阅读
- ruby-on-rails - 较大的视频未在 s3/回形针上上传
- javascript - 如何在没有承诺的情况下在函数内返回值(访问令牌)?
- javascript - 在 html 表中显示 javascript 数组
- image - 如何从 microsoft.toolkit 自定义轮播
- android - 如何使用 volley 库发送带有标头的 json 数据
- amazon-web-services - 将文件从 AWS S3 复制到 HDFS(Hadoop 分布式文件系统)
- java - 如何在 Lagom 中向 Kafka 主题发布消息
- node.js - 环回 3 是否支持带有跳过 + 限制的 where 过滤器?
- sql - 将单个列中 JSON 的 postgres 数组扩展为多条记录
- python - 如何使用此 python 代码将转换后的文件保存到 Amazon S3 和 Media Convert 中的同一源目录