javascript - bar pointPlacement 在获取一个数据时效果不佳
问题描述
pointPlacement
当数据大于 1时使用in highcharts 时,它工作正常,但是当从服务器获取一个数据时,所有条形压缩到一个条形。
对不起我的英语不好
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>
<div id="container" style="min-width: 360px; height: 400px; margin: 0 auto"></div>
解决方案
这是此处报告的 Highcharts 错误:https ://github.com/highcharts/highcharts/issues/11800
作为一种解决方法,您可以设置pointRange: 1
:
plotOptions: {
column: {
pointRange: 1,
...
}
}
现场演示:http: //jsfiddle.net/BlackLabel/Lzx3shrn/
API 参考: https ://api.highcharts.com/highcharts/series.column.pointRange
推荐阅读
- python - 基于参考点标准化坐标点
- javascript - 每次迭代创建新数组
- macos - 错误:无法以英特尔默认前缀 (/usr/local) 在 ARM 处理器上安装 Homebrew
- linux - 使用 ssh 连接到 docker 容器时出错
- asp.net - 如何将 .net 核心 Web API 部署为虚拟目录
- postgresql - PostgreSQL:致命:用户“postgres”的密码验证失败
- reactjs - 在 NextJs 中的故事书设置“找不到模块'css-loader/lib/getLocalIdent'”期间出现问题
- html - 设置链接我的网页时显示的图像
- php - SQL 显示多条记录
- python - Python Socket.io 处理所有事件(从客户端捕获所有事件)