hicharts中treemap添加超連接

時間 2019-12-11

標籤 hicharts treemap 添加連接简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/highcharts.js"></script>
    <script src="./js/heatmap.js"></script>
    <script src="./js/treemap.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    $('#container').highcharts({
        plotOptions:{
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            window.open(this.options.url);
                        }
                    }
                }
            }
        },
        series: [{
            type: "treemap",
            layoutAlgorithm: 'stripes',
            alternateStartingDirection: true,
            levels: [{
                level: 1,
                layoutAlgorithm: 'sliceAndDice',
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    verticalAlign: 'top',
                    style: {
                        fontSize: '15px',
                        fontWeight: 'bold'
                    }
                }
            }],
            data: [{
                id: 'A',
                name: '蘋果',
                color: "#EC2500",
                url:"http://www.baidu.com"
            }, {
                id: 'B',
                name: '香蕉',
                color: "#ECE100",
                url:"http://www.comjia.com"
            }, {
                id: 'O',
                name: '橘子',
                color: '#EC9800',
                url:"http://www.renren.com"
            }, {
                name: '小張',
                parent: 'A',
                value: 5,
                url:"http://www.qq.com"
            }, {
                name: '小彭',
                parent: 'A',
                value: 3,
                url:"http://www.163.com"
            }, {
                name: '小潘',
                parent: 'A',
                value: 4,
                url:"http://www.sohu.com"
            }, {
                name: '香蕉1',
                parent: 'B',
                value: 4,
                url:"http://www.360.cn"
            }, {
                name: '香蕉2',
                parent: 'B',
                value: 10,
                url:"http://www.google.com"
            }, {
                name: '香蕉3',
                parent: 'B',
                value: 1,
                url:"http://www.mi.com"
            }, {
                name: '小張',
                parent: 'O',
                value: 1,
                url:"http://www.mop.com"
            }, {
                name: '小彭',
                parent: 'O',
                value: 3,
                url:"http://www.tianya.cn"
            }, {
                name: '小潘',
                parent: 'O',
                value: 3,
                url:"http://www.taobao.com"
            }, {
                name: '阿蘇',
                parent: 'wiki',
                value: 2,
                color: '#9EDE00',
                url:"http://www.jd.com"
            }]
        }],
        title: {
            text: '水果消費狀況'
        }
    });
</script>
</body>
</html>

運行結果：html

圖中的每一個統計項都有不一樣的連接地址，在同一大的統計項香蕉項中，總的統計項和下面的3個統計小項也分別有着不一樣的超連接。jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。