javascript - 如何限制高图表中的数据标签?
问题描述
我想限制图表上显示的数据标签的数量。我不知道该怎么做。它本身的图表有很多数据点,我想限制数据标签以便更好地阅读。 图表
document.addEventListener('DOMContentLoaded', function() {
dht22temp = Highcharts.chart('containerDHT22Temp', {
chart: {
type: 'spline',
events: {
load: requestDataDHT22_Temp
},
},
title: {
text: 'DHT22 Temperatura'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'Temp',
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
},
enableMouseTracking: true
}
},
series: [{
name: 'Temp',
data: [<?php echo join($dataDHT22Temp, ',') ?>],
}],
exporting: {
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
});
});
解决方案
检查dataLabels.formatter
:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.index%3 == 0 ? this.y + '°C' : undefined;
}
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This chart shows how data labels can be added to the data series. This
can increase readability and comprehension for small datasets.
</p>
</figure>
推荐阅读
- c - 接收十六进制值并将其保存到数组 [STM32]
- tfs - Azure DevOps 迁移如何修复错误 VS403300
- vba - 如何安排宏,并继续尝试直到满足条件?
- historian - Proficy Historian RestAPI - 使用包含“#”的标签检索插值数据
- c - 我应该如何避免与 C 中包含的库发生命名冲突?
- javascript - Ajax 请求返回 '200 OK'
- jquery - 根据按钮的属性值添加/删除 css 类
- python - 如何使帖子标题在我的模板中可用
- transactions - 矿工之间交易的有效性冲突
- hibernate - @Enumerated(EnumType.STRING) 因@AttributeOverride 而丢失