我使用highcharts,我的数据喜欢这个:
data: [
[5,11,20,"peter"],
[4,12,20,"tom"],
[6,13,20,"kate"],
[7,14,15,"king"],
[8,16,16,"jin"]
]
如何显示第4列数据(第4列是名称)或超过3列数据?
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 't1'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[5,11,20,"peter"],
[4,12,20,"tom"],
[6,13,20,"kate"],
[7,14,15,"king"],
[8,16,16,"jin"]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
答案 0 :(得分:0)
我修改了这样的代码,然后它可以显示所有列。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>
$(function () {
var data= [
{"employeeCode":5,"w1":11,"b1":40,"employeeName":"peter"},
{"employeeCode":4,"w1":12,"b1":41,"employeeName":"tom"},
{"employeeCode":6,"w1":13,"b1":39,"employeeName":"kate"}
];
data.map(function(el,i){
data[i]=({x:el.employeeCode,y:el.w1,z:el.b1,employeeName:el.employeeName});
})
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 't1'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: 'employeeCode:{point.x}<br/>' +
'w1:{point.y}<br/>' +
'b1:{point.z}<br/>' +
'employeeName:{point.employeeName}',
followPointer: true
},
series: [{
data: data,
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
</script>
</body>
</html>