Highcharts图表简单demo

最新推荐文章于 2022-05-20 17:27:57 发布

疾风剑豪李云龙

最新推荐文章于 2022-05-20 17:27:57 发布

阅读量557

点赞数

分类专栏：常用工具文章标签： Hightcharts

本文链接：https://blog.csdn.net/Woodenflyers/article/details/89017879

版权

常用工具专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html页：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Content/jquery-3.3.1.min.js"></script>
    <script src="~/Content/highcharts.js"></script>
    <script src="~/Content/highcharts-3d.js"></script>
    <script src="~/Script/Demo_Index.js"></script>
    <title>Index</title>
</head>
<body>
    <div>
        <div id="lineChart"></div>
        <div id="columnChart"></div>
        <div id="pieChart"></div>
    </div>
</body>
</html>

js页：

//Highcharts using demo

var value;
$(function () {

    getData();

    drawLine();

    drawColumn();

    drawPie();
});

//取数据
function getData() {
    //取数据
    value = '{' +
        'val:' +
        '[' +
        '{ "name": "炉石旅店", "data": "[[2010, 1000], [2012, 500], [2013, 900], [2015, 100], [2017, 3000],]" },' +
        '{ "name": "谢尔顿", "data": "[[2006, 200], [2008, 500], [2013, 300], [2015, 200], [2017, 3300],]" },' +
        '{ "name": "7天", "data": "[[2010, 1000], [2012, 500], [2013, 1000], [2015, 100], [2017, 3000],]" },' +
        '{ "name": "如家", "data": "[[2010, 1000], [2012, 500], [2013, 900], [2015, 100], [2017, 3000],]" },' +
        ']' +
        '} ';
}

//折线图
function drawLine() {
    //设置图表基本属性
    var chart = {
        type: 'line',
        options3d: {
            enabled: true,      //开启3D
            alpha: 15,            //右视图顺时针旋转角度（可负）
            beta: -15,            //俯视图顺时针旋转角度（可负）
            depth: 120,        //图表的合计深度，默认为100
        }
    };
    //标题
    var title = {
        text: "旅店历年营业状况统计"
    };
    //副标题
    var subtitle = {
        text: '数据来源：自己编的'
    };
    //X轴属性
    var xAxis = {
        title: {
            text: '年份'
        },
        //若为固定值，可用下面这种
        //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        //    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    };
    //Y轴属性
    var yAxis = {
        title: {
            text: '营业额'
        }
    };
    //图例属性
    var legend = {
        layout: 'horizontal',                //排列方式:vertical垂直/horizontal水平
        align: 'right',                            //水平方向位置:left/right
        verticalAlign: 'top',                //垂直方向位置:top/middle/bottom
    };
    //数值点属性
    var plotOptions = {
        line: {
            //点上显示数值
            dataLabels: {
                enabled: true
            },
            //禁用鼠标触发
            enableMouseTracking: false
        }
    };
    /*折线图标准数据格式
    当x轴为固定值时，data为Y轴数据数组
    若为不连续点，data应使用[[x1,y1][x2,y2],[x3,y3]...]的形式*/
    var series = [
        {
            name: 'Tokyo',
            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: 'New York',
            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: 'London',
            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]
        }
    ];

    //动态绑定数据
    var jdata = eval("(" + value + ")");
    var val = jdata.val;
    var series = new Array();
    for (var i = 0; i < val.length; i++) {
        series[i] = new Object();
        series[i].name = val[i].name;
        series[i].data = eval("(" + val[i].data + ")");
    }

    var json = {};
    json.chart = chart;
    json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.legend = legend;
    json.series = series;
    json.plotOptions = plotOptions;
    $('#lineChart').highcharts(json);
}

//柱状图
function drawColumn() {
    //设置图表基本属性
    var chart = {
        type: 'column',
        options3d: {
            enabled: true,      //开启3D
            alpha: 15,            //右视图顺时针旋转角度（可负）
            beta: -15,            //俯视图顺时针旋转角度（可负）
            depth: 120,        //图表的合计深度，默认为100
        }
    };
    //标题
    var title = {
        text: "旅店历年营业状况统计"
    };
    //副标题
    var subtitle = {
        text: '数据来源：自己编的'
    };
    //X轴属性
    var xAxis = {
        title: {
            text: '年份'
        },
        //若为固定值，可用下面这种
        //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        //    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    };
    //Y轴属性
    var yAxis = {
        title: {
            text: '营业额'
        }
    };
    //图例属性
    var legend = {
        layout: 'horizontal',                //排列方式:vertical垂直/horizontal水平
        align: 'right',                            //水平方向位置:left/right
        verticalAlign: 'top',                //垂直方向位置:top/middle/bottom
    };
    //数值点属性
    var plotOptions = {
        column: {
            //点上显示数值
            dataLabels: {
                enabled: true
            },
            //禁用鼠标触发
            //enableMouseTracking: false
        }
    };
    //动态绑定数据
    var jdata = eval("(" + value + ")");
    var val = jdata.val;
    var series = new Array();
    for (var i = 0; i < val.length; i++) {
        series[i] = new Object();
        series[i].name = val[i].name;
        series[i].data = eval("(" + val[i].data + ")");
    }

    var json = {};
    json.chart = chart;
    json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.legend = legend;
    json.series = series;
    json.plotOptions = plotOptions;
    $('#columnChart').highcharts(json);
}

//饼状图
function drawPie() {
    //图标基本设定
    var chart = {
        type: 'pie',
        //开启3D
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    };
    //主标题
    var title = {
        text: "13年旅店历年营业状况统计"
    };
    //副标题
    var subtitle = {
        text: '数据来源：自己编的'
    };
    //提示设置
    var tooltip = {
        //格式化提示说明
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    };
    //数值点属性
    var plotOptions = {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            },
            //显示图例
            showInLegend: true,
            //自定义事件
            events: {
                click: function (e) {
                    alert(e.point.name + "13年的营业额为" + e.point.y);
                }
            }
        }
    };
    //饼状图标准数据格式
    var series = [{
        name: 'Browser share',
        data: [
            ['Firefox', 45.0],
            ['IE', 26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari', 8.5],
            ['Opera', 6.2],
            ['Others', 0.7]
        ]
    }];

    //动态绑定数据
    var jdata = eval("(" + value + ")");
    var val = jdata.val;
    var data = new Array();
    for (var i = 0; i < val.length; i++) {
        var arr = new Array();
        arr[0] = val[i].name;
        var jsdata = eval("(" + val[i].data + ")");
        if (jsdata.length > 0) {
            for (var j = 0; j < jsdata.length; j++) {
                if (jsdata[j][0] == "2013") {
                    arr[1] = jsdata[j][1];
                    break;
                }
            }
        }
        data.push(arr);
    }
    var series = [{
        name: '营业额占比',
        data: data
    }];

    var json = {};
    json.chart = chart;
    json.title = title;
    json.subtitle = subtitle;
    json.tooltip = tooltip;
    json.series = series;
    json.plotOptions = plotOptions;

    $('#pieChart').highcharts(json);


}