JS图表
http://www.cnblogs.com/java-pan/archive/2011/12/31/highcharts.html
另MVC3下：
View Code
/***************************************************************/ $(".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'); } }); } })