HighCharts每个类别多个数据点
HighCharts multiple data points per category
本文关键字:数据 HighCharts 更新时间:2023-09-26
我希望将多个数据点绘制在类别上。在下面的示例案例中,对于"一月"月份,我想绘制多个数据点而不是一个。类似于 [20,28] 在同一垂直线上。请看我为东京和一月准备的系列。我想传递一个数据点数组而不是单个数据点。(示例 [20,28] 而不是 28)
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter'
},
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
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [[20,28], 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]
}]
});
});
您可以使用以下方法将数据点绘制到同一垂直方向。
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: 'Months'
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [[0, 20], [0, 28], [1, 6.9], [2, 9.5],[3, 14.5],[4, 18.4], [5, 21.5], [6, 25.2], [7, 26.5], [8, 23.3], [9, 18.3], [10, 13.9], [11, 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]
}]
});
});
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
相关文章:
- Highcharts可以从服务器加载数据,但不能更新
- Highcharts:根据表单输入动态显示数据
- 构建多个图表时,HighCharts加载数据的速度较慢
- Highcharts xAxis将格式化程序回调数据标记为空
- Highcharts如何显示在设置数据时加载动画
- Highcharts动态地将JSON数据拉入序列名
- Highcharts系列.数据数据类型限制
- Highcharts车速表,里程计数器的数据标签
- Highcharts将数据输出到HTML表
- 使用用户输入动态转换数据(Highcharts,JavaScript,Django)
- Highcharts,将错误栏与数据模块一起使用
- 具有自定义json响应的Highcharts系列数据
- 如何使用Highcharts和可滚动数据将页面内容导出为jpg或pdf
- 从Highcharts上的文本和绘图中获取数据
- Highcharts柱状图,从数据表加载时禁用插值
- Highcharts映射附加不需要的数据
- Highcharts甜甜圈工具提示格式使用钻取数据
- Angular Highcharts ng如何将其他数据系列设置为工具提示
- Highcharts数据FF和IE中的标签定位问题
- Highcharts数据将不会使用角度指令加载