查看: 1880|回复: 0

[.NET开发] C#趋势图(highcharts插件)

发表于 2017-9-26 08:00:01
  1. <!--图表效果展现-->
  2. <div class="TUI-layout-center" style="overflow: auto;" id="appriseContent">
  3. <div class="ui-layout-center">
  4. <div id="listDiv" style="overflow: auto;" class="TUI-content TUI-h100">
  5. <!-- class="master_table_content_bg"-->
  6. <div runat="server" id="divData" class="TUI-content TUI-h100 TUI-of-auto" style="overflow: auto;">
  7. </div>
  8. </div>
  9. </div>
  10. <div class="ui-layout-east" id="divEast">
  11. <div id="chart_combo" class="chart_combo" style="margin-top:100px;"></div>
  12. </div>
  13. </div>
  14. <!--图表效果展现-->
复制代码
View Code
  1. <script type="text/javascript">
  2. var ajax = Topevery.DUM.Web.AjaxFunction;
  3. $(document).ready(function () {
  4. TUILayout("form");
  5. createEastLayout();
  6. $("td").css("text-align", "center");
  7. })
  8. function createEastLayout() {
  9. var myLayout = $("#appriseContent").layout({
  10. fxName: "slide" //fxName 窗体隐藏显示的动画效果
  11. , fxSpeed: "slow" //fxSpeed 动画效果的显示时间/速度
  12. , maskIframesOnResize: false //maskIframesOnResize 页面中存在Iframe对象时,设为true
  13. , closable: false //closable 是否允许隐藏打开窗体,true为允许
  14. , east__size: "100%" //west__size 为调整西边窗体的宽度
  15. , resizable: false //resizable 是否允许调整窗体的高/宽, true为允许
  16. , slidable: false //slidable 是否允许窗体隐藏后可以滑动预览
  17. , north__fxName: "slide" //north__fxName 北边窗体隐藏显示的动画效果
  18. , south__fxName: "slide" //south__fxName 南边窗体隐藏显示的动画效果
  19. , spacing_closed: 7 //spacing_closed 隐藏后的间隔栏高宽
  20. , spacing_open: 7 //spacing_open 显示后的间隔栏高宽
  21. , initClosed: false //initClosed 窗体创建后默认隐藏所有窗体
  22. , resizerTip: "调整内容宽度" //resizerTip 鼠标移上调整窗体栏所显示的文字提醒
  23. , resizerDragOpacity: "0.8" //resizerDragOpacity 鼠标调整窗体栏显示显示的透明度效果
  24. , sliderTip: "展开" //sliderTip 鼠标移上滑动隐藏窗体栏所显示的文字提醒
  25. , togglerTip_open: "隐藏" //togglerTip_open 鼠标移上打开的窗体按钮文字提醒
  26. , togglerTip_closed: "展开" //togglerTip_closed 鼠标移上关闭的窗体按钮文字提醒
  27. , onopen_end: function () {
  28. }
  29. , onresize_end: function () {
  30. }
  31. /* , center__showOverflowOnHover: true 被Aaron注释,firefox下导致下拉框无法正常使用。see http://layout.jquery-dev.com/documentation.cfm#Option_showOverflowOnHover */
  32. });
  33. TUILayout("#divEast");
  34. showCharts1();
  35. }
  36. function showCharts1() {
  37. ajax.GetStatisticsHome3List(function (result) {
  38. if (result.value) {
  39. oneHighcharts(result.value.sbnumber, result.value.yxsbnumber, result.value.janumber);
  40. }
  41. })
  42. }
  43. function oneHighcharts(sbnumber, yxsbnumber, janumber) {
  44. var chart;
  45. $(function () {
  46. chart = new Highcharts.Chart({
  47. chart: {
  48. renderTo: 'chart_combo' //关联页面元素div#id
  49. },
  50. title: { //图表标题
  51. text: '月份案件统计图'
  52. },
  53. xAxis: { //x轴
  54. categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //X轴类别
  55. labels: { y: 18 } //x轴标签位置:距X轴下方18像素
  56. },
  57. yAxis: { //y轴
  58. title: { text: '案件数' }, //y轴标题
  59. lineWidth: 2 //基线宽度
  60. },
  61. tooltip: {
  62. formatter: function () { //格式化鼠标滑向图表数据点时显示的提示框
  63. var s;
  64. if (this.point.name) { // 饼状图
  65. s = '<b>' + this.point.name + '</b>: <br>' + this.y + '件(' + twoDecimal(this.percentage) + '%)';
  66. } else {
  67. s = '' + this.x + ': ' + this.y + '件';
  68. }
  69. return s;
  70. }
  71. },
  72. labels: { //图表标签
  73. items: [{
  74. html: '',
  75. style: {
  76. left: '270px',
  77. top: '8px'
  78. }
  79. }]
  80. },
  81. exporting: {
  82. enabled: false //设置导出按钮不可用
  83. },
  84. credits: {
  85. enabled: false // 禁用版权信息
  86. },
  87. series: [{ //数据列
  88. type: 'line',
  89. name: "上报案件总数",
  90. data: [sbnumber[0], sbnumber[1], sbnumber[2], sbnumber[3], sbnumber[4], sbnumber[5], sbnumber[6], sbnumber[7], sbnumber[8], sbnumber[9], sbnumber[10], sbnumber[11]]
  91. },
  92. { //数据列
  93. type: 'line',
  94. name: "有效案件数",
  95. data: [yxsbnumber[0], yxsbnumber[1], yxsbnumber[2], yxsbnumber[3], yxsbnumber[4], yxsbnumber[5], yxsbnumber[6], yxsbnumber[7], yxsbnumber[8], yxsbnumber[9], yxsbnumber[10], yxsbnumber[11]]
  96. },
  97. { //数据列
  98. type: 'line',
  99. name: "结案数",
  100. data: [janumber[0], janumber[1], janumber[2], janumber[3], janumber[4], janumber[5], janumber[6], janumber[7], janumber[8], janumber[9], janumber[10], janumber[11]]
  101. }
  102. ]
  103. });
  104. });
  105. }
  106. //保留2位小数
  107. function twoDecimal(x) {
  108. var f_x = parseFloat(x);
  109. if (isNaN(f_x)) {
  110. alert('错误的参数');
  111. return false;
  112. }
  113. var f_x = Math.round(x * 100) / 100;
  114. var s_x = f_x.toString();
  115. var pos_decimal = s_x.indexOf('.');
  116. if (pos_decimal < 0) {
  117. pos_decimal = s_x.length;
  118. s_x += '.';
  119. }
  120. while (s_x.length <= pos_decimal + 2) {
  121. s_x += '0';
  122. }
  123. return s_x;
  124. }
  125. </script>
复制代码
View Code
  1. [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.Read)]
  2. public static ForecastData GetStatisticsHome3List()
  3. {
  4. ForecastData date = new ForecastData();
  5. DataTable dt= UmEventLogic.GetStatisticsHome3List().Tables[0];
  6. for (int i = 0; i < 12; i++)
  7. {
  8. date.sbnumber[i] = Convert.ToInt32(dt.Rows[i]["c_sb_num"]);
  9. date.yxsbnumber[i] = Convert.ToInt32(dt.Rows[i]["c_yxsb_num"]);
  10. date.janumber[i] = Convert.ToInt32(dt.Rows[i]["c_ja_num"]);
  11. }
  12. return date;
  13. }
复制代码
View Code

highcharts.js地址 https://www.hcharts.cn/download



回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条