JS图表

http://www.cnblogs.com/java-pan/archive/2011/12/31/highcharts.html

 

 

另MVC3下：

 /***************************************************************/

                $(".validatebox-text").val()  //取多选下拉框的值
                $("#Foot").css("display", ""); //将分页的控件显示出来
                $("#pp").show();
                $("#container").css("background-color", "#F3F7FB");
                $("#container2").css("background-color", "#F3F7FB");
                $("#container3").css("background-color", "#F3F7FB");
                $("#container4").css("background-color", "#F3F7FB");

                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        margin: [50, 100, 60, 100]
                    },
                    title: {
                        text:  strtitle + "- 0:00AM~6:00AM"
                    },
                    plotArea: {
                        shadow: null,
                        borderWidth: null,
                        backgroundColor: null
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.y + ''; //单位
                        }
                    },
                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: true,
                                formatter: function () {
                                     return this.point.name;
                                },
                                color: 'white',
                                style: {
                                    font: '13px Trebuchet MS, Verdana, sans-serif'
                                }
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '50px',
                            top: '100px'
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [{
                            name: '@ViewBag.Using',
                            y:parseInt(argarr[5]),
                            sliced: false
                        },
                        //                                        ['Using', 26],
                                        {
                                        name:  '@ViewBag.NoUse',
                                        y:parseInt(argarr[1]) -parseInt(argarr[5]),
                                        sliced: false
                        }
                                    ]
                        //data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
                    }]
                });
                var chart2 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container2',
                        margin: [50, 100, 60, 100]
                    },
                    title: {
                        text:  strtitle + "- 6:00AM~12:00AM"
                    },
                    plotArea: {
                        shadow: null,
                        borderWidth: null,
                        backgroundColor: null
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.y +  ''; //单位
                        }
                    },
                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: true,
                                formatter: function () {
                                    return this.point.name; // if (this.y > 5) return this.point.name;
                                },
                                color: 'white',
                                style: {
                                    font: '13px Trebuchet MS, Verdana, sans-serif'
                                }
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '50px',
                            top: '100px'
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [{
                            name: '@ViewBag.Using',
                            y: parseInt(argarr[6]),
                            sliced: false
                        },
                        //                                        ['Using', 26],
                                        {
                                        name: '@ViewBag.NoUse',
                                        y: parseInt(argarr[2]) -parseInt(argarr[6]),
                                        sliced: false
                        }
                                    ]
                        //data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
                    }]
                });
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container3',
                        margin: [50, 100, 60, 100]
                    },
                    title: {
                        text: strtitle + "- 12:00AM~18:00PM"
                    },
                    plotArea: {
                        shadow: null,
                        borderWidth: null,
                        backgroundColor: null
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.y +  ''; //单位
                        }
                    },
                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: true,
                                formatter: function () {
                                    return this.point.name;
                                },
                                color: 'white',
                                style: {
                                    font: '13px Trebuchet MS, Verdana, sans-serif'
                                }
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '50px',
                            top: '100px'
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [{
                            name:  '@ViewBag.Using',
                            y: parseInt(argarr[7]),
                            sliced: false
                        },
                                    
                                        {
                                            name:  '@ViewBag.NoUse',
                                            y: parseInt(argarr[3]) -parseInt(argarr[7]),
                                            sliced: false
                                        }
                                    ]
                        //data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
                    }]
                });
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container4',
                        margin: [50, 100, 60, 100]
                    },
                    title: {
                        text: strtitle + "- 18:00PM~24:00PM"
                    },
                    plotArea: {
                        shadow: null,
                        borderWidth: null,
                        backgroundColor: null
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.y +  ''; //单位;
                        }
                    },
                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: true,
                                formatter: function () {
                                    return this.point.name;
                                },
                                color: 'white',
                                style: {
                                    font: '13px Trebuchet MS, Verdana, sans-serif'
                                }
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '50px',
                            top: '100px'
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [{
                            name:  '@ViewBag.Using',
                            y: parseInt(argarr[8]),
                            sliced: false
                        },
                                        
                                        {
                                            name: '@ViewBag.NoUse',
                                            y: parseInt(argarr[4]) -parseInt(argarr[8]),
                                            sliced: false
                                        }
                                    ]
                        //data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
                    }]
                });
        
/***************************************************************/ 
                        }
                        else {
                            alert('@ViewBag.NoRecord');
                        }
                   
                    });
              }
            })