highcharts

老版调用方式demo
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>demo</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
</head>

<body>
<div id="tableContent"></div>
<div id="timeTableContent"></div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://code.highcharts.com.cn/highcharts/4.1.5/highcharts.js"></script>
<script type="text/javascript">
//  Highcharts JS v4.1.5 (2015-04-13) Highcharts老版调用方式 
$('#tableContent').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: '分类统计'
    },
    subtitle: {
        text: '' //数据来源: WorldClimate.com
    },
    xAxis: {
        categories: [
            '异常','退款','特殊'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        },
        series: {
            cursor: 'pointer',
            events: {
                click: function (event) { //点击事件
                    alert(
                        this.name + ' 被点击了
' +
                        '最近点：' + event.point.category + '
' + 
                        'Alt 键: ' + event.altKey + '
' +
                        'Ctrl 键: ' + event.ctrlKey + '
' +
                        'Meta 键（win 键）： ' + event.metaKey + '
' +
                        'Shift 键：' + event.shiftKey
                    );
                }
            }
        }
    },
    series: [{
        name: '东京',
        data: [49.9, 71.5, 106.4] //19个数据，跟categories个数对应
    }]
})

$('#timeTableContent').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: '异常时间'
        },
        subtitle: {
            text: '' //数据来源: Wikipedia.org
        },
        xAxis: {
            categories: ['今天', '昨天', '前天','30天之前'], //备注，可搞成变量
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            minRange: 1, //柱形图 当数据全为0时，怎么让数据居底部，而不是当中
            title: {
                text: '',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' 百万' //单位
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    allowOverlap: true // 允许数据标签重叠
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        series: [{
            name: '2020年',
            data: [0, 0, 6, 0, 0]
        }]
    })
</script>
</body>
</html>
View Code
参考资料：highcharts cdn地址
文档地址： https://api.highcharts.com.cn/highcharts