javascript - hightcharts动态绘制坐标的问题？
本文介绍了javascript - hightcharts动态绘制坐标的问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
运行结果 JS 代码 HTML 代码
编辑代码
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
<html>
3
<head>
4
<meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
5
<meta name="viewport" content="width=device-width, initial-scale=1">
6
<style>
7 .highcharts-tooltip h3 {
margin: 0.3em 0;
}
8
</style>
9
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
10
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
11
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
12
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
13
</head>
14
<body>
15
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
16
<script>
17
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
},
legend: {
enabled: false
},
title: {
text: '不同国家糖和脂肪的摄入量'
},
subtitle: {
text: '数据来源: <a href="https://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>脂肪摄取量:</th><td>{point.x}g</td></tr>' +
'<tr><th>糖摄取量:</th><td>{point.y}g</td></tr>' +
'<tr><th>肥胖 (成年人):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', country: '比利时' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: '德国' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: '芬兰' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: '荷兰' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: '瑞典' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: '西班牙' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: '法国' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: '挪威' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: '英国' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: '意大利' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: '俄罗斯' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: '美国' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: '匈牙利' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: '葡萄牙' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: '新西兰' }
]
}]
});
});
</script>
</body>
</html>
代码如上 加载完毕之后 会自动渲染出横纵轴 我不想要这个横纵轴 应该怎么去掉
解决方案
设置 x 轴不显示即可，关键代码：
xAxis: {
visible: false
}在线示例：https://code.hcharts.cn/jians...
这篇关于javascript - hightcharts动态绘制坐标的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
