Chart图表

引用

  <script src="Scripts/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="highcharts.js"></script>

先后顺序不能反

在body里给三个div分别给上id

 

饼图

 $(function () {

        $("#container").highcharts({  //图表展示容器，与div的id保持一致

 

            chart: { //指定图表的类型，默认是折线图（line）

                plotBackgroundColor: null, //绘图区背景颜色

                plotBorderWidth: null, //绘图区边框宽度

                plotShadow: false //绘图投影

            },

            title: { //头部

                text: '饼子图'

            },

            tooltip: {  //数据提示框

                //单个点的格式化函数

                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

            },

            plotOptions: { //图例事件，图例默认的点击行为是显示或隐藏当前数据列

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: true, //通过设置 legend.enabled = true | false 来打开或关闭图例

                        color: 'red',

                        connectorColor: 'blue',

                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'

                    }

                }

            },

            series: [

{

    type: 'pie',

    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]

    ]

}]

        });

});