使用highchart.js

使用highchar.js

注意内容

script要写在body前，不然显示不了。

html部分<div id="container_column" style="min-width: 310px; height:220px; margin: 20px auto 5px"></div><div id="container_line" style="min-width: 310px; height:220px; margin: 20px auto 5px"></div> <div id="container_pie" style="min-width: 310px; height:220px; margin: 20px auto 5px"></div>

---

script部分  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>    <script type="text/javascript">        $(function () {            // Create the chart            $('#container_column').highcharts({                credits: {                    text: ' ',                    href: ' '                },                chart: {                    type: 'column'                },                title: {                    text: ''                },                subtitle: {                    text: ''                },                xAxis: {                    type: 'category'                },                yAxis: {                    title: {                        text: ''                    }                },                legend: {                    enabled: false                },                plotOptions: {                    series: {                        borderWidth: 0,                        dataLabels: {                            enabled: true,                            format: '{point.y:.1f}分'                        }                    }                },                tooltip: {                    headerFormat: '<span style="font-size:3px">{series.name}</span><br>',                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}分</b><br/>'                },                series: [{                    name: '成绩',                    colorByPoint: true,                    data: [{                        name: '语文',                        y: 119,                        drilldown: ''                    }, {                        name: '数学',                        y: 91,                        drilldown: ''                    }, {                        name: '外语',                        y: 130,                        drilldown: ''                    }, {                        name: '物理',                        y: 110,                        drilldown: ''                    }, {                        name: '化学',                        y:90,                        drilldown: ''                    }, {                        name: '生物',                        y:110,                        drilldown: ''                    }]                }],                colors: [                    '#f7672a',                    '#1596F1',                    '#f7672a',                    '#f7672a',                    '#21E4DE',                    '#21E4DE'                ]            });        });    </script>    <script type="text/javascript">        $(function () {            $('#container_line').highcharts({                chart: {                    type: 'line'                },                credits: {                    text: ' ',                    href: ' '                },                title: {                    text: ''                },                subtitle: {                    text: ''                },                plotOptions: {                    series: {                        borderWidth: 0,                        dataLabels: {                            enabled: true,                            format: '{point.y:.1f}%'                        }                    }                },                xAxis: {                    categories: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次'],                    lineColor:['#000']                },                yAxis: {                    title: {                        text: ''                    }                },                plotOptions: {                    line: {                        dataLabels: {                            enabled: true,                            format:'{point.y:.1f}%'                        },                        enableMouseTracking: true                    }                },                series: [{                    name:  ' ',                    data: [65, 60, 45, 60, 90, 30]                }]            });        });    </script>    <script type="text/javascript">        $(function () {            $('#container_pie').highcharts({                chart: {                    type: 'pie',                    options3d: {                        enabled: true,                        alpha: 45,                        beta: 0                    }                },                credits: {                    text: ' ',                    href: ' '                },                title: {                    text: ''                },                tooltip: {//                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'                    pointFormat: ''                },                plotOptions: {                    pie: {                        allowPointSelect: true,                        cursor: 'pointer',                        depth: 35,                        dataLabels: {                            enabled: true,                            format: '{point.name}'                        }                    }                },                series: [{                    type: 'pie',                    name: '',                    data: [                        ['已交作业(75%)', 75.0],                        {                            name: '未交作业(25%)',                            y: 25,                            sliced: true,                            selected: true                        },                    ]                }],colors: [                    '#f7672a',                    '#1596F1'                ]            });        });    </script>

主要看hightchar中文文档。资料充足