使用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中文文档。资料充足