如何使用highcharts bubble显示3列以上的数据?

时间:2018-04-18 00:35:35

标签: highcharts

我使用highcharts,我的数据喜欢这个:

data: [
               [5,11,20,"peter"],
               [4,12,20,"tom"],
               [6,13,20,"kate"],
               [7,14,15,"king"],
               [8,16,16,"jin"]
       ]

当我使用我的代码进行测试时,结果只显示3列数据。 enter image description here

如何显示第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')]
                    ]
                }
            }
        }]
    });
});

1 个答案:

答案 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>

enter image description here