highcharts是一个javascript图表库,支持曲线图、柱状图、饼图、散点图等。具体的demo可查看官方网站:highcharts示例

       使用之前肯定要引入相应的js文件,以3d饼图为例,需要引用highcharts.js和highcharts-3d.js,两个文件可到官网下载。参数div为饼图在html中的容器的id,pieTitle和pieSubTitle为饼图的标题和副标题,pieSeriesName是字段值的名称。pieSeriesData是一个数组,每个元素也是一个数组,包括字段名和字段值两个元素,字段值必须为数值型。

pieSeriesData = new Array();.push(new Array(key,value));

function pieChart(div) {
    Highcharts.chart(div, {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: pieTitle
        },
        subtitle: {
            text: pieSubTitle
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45,
                events: {
                    click: function (e) {pieClick(e.point.name);}    
                }
            }
        },
        series: [{
            name: pieSeriesName,
            data: pieSeriesData
        }]
    });
}

饼图的点击事件

function pieClick(name){

//name为所点击的饼图区域的key值,即pieSeriesData中配置的数据源中的key,可根据key值进行相关操作。

}

效果图如下:



Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐