HighChart pie饼图多选 and 折线图 add 增加 remove删除series数据列

最新推荐文章于 2025-06-28 21:59:39 发布

原创最新推荐文章于 2025-06-28 21:59:39 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据 #highchart

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HighChart库在饼图和折线图中实现数据列的多选、增加及删除操作，帮助读者掌握动态更新图表数据的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
    <meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="description" content="">
    <title>基础饼图</title>
    <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/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-07-28 13:59:17
    From: https://code.hcharts.cn/demos/hhhhDX
*************************************************************************
-->
<div id="container" style="min-width:400px;height:400px"></div>

    <script>
        var chart = new Highcharts.Chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '2014 某网站各浏览器浏览量占比'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    point: {
                        events: {
                            //多选的代码如下
                            click: function (e) {
                                console.log("click");
                                points = chart.getSelectedPoints();

                                for( index in  points){
                                    if (points[index].name == this.name) {
                                        this.select(false, true)
                                        return false;
                                    }
                                }
                                this.select(true, true)
                                return false;
                            },
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '浏览器访问量占比',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['其他',   0.7]
                ]
            }]
        });
</script>

</body></html

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="description" content="">
    <title>基础直线图</title>
    <script src="https://img.hcharts.cn/highcharts/highcharts.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>
<!--
*************************************************************************
    Generated by HCODE at 2017-07-28 09:49:57
    From: https://code.hcharts.cn/demos/hhhhxL
*************************************************************************
-->
<div id="container" style="min-width:400px;height:400px"></div>
<button type="button" onclick="add()">addSeries</button>
<button type="button" onclick="remove()">removeSeries</button>
    <script>

    /**
  * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
 **/
var chart = new Highcharts.Chart('container', {
    plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    return false;
                }
            }
        }
    },
    title: {
        text: '不同城市的月平均气温',
        x: -20
    },
    subtitle: {
        text: '数据来源: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
        title: {
            text: '温度 (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: '东京',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: '纽约',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: '柏林',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }]
});
    //添加
    function add() {
        chart.showLoading("数据正在加载")
        for( index in chart.series){
            if(chart.series[index].name == "伦敦"){
                chart.hideLoading()
                return;
            }

        }
        chart.addSeries({
            name: '伦敦',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        })
        chart.hideLoading()
    }
    //删除
    function remove() {
        for( index in chart.series ){
            if(chart.series[index].name == "伦敦"){
                chart.series[index].remove()
            }
        }
    }
</script>

</body></html