hightcharts图表简单使用

最新推荐文章于 2022-09-18 10:27:41 发布
最新推荐文章于 2022-09-18 10:27:41 发布
阅读量533 收藏
点赞数
分类专栏： js/css/html/ps 文章标签： hightcharts



[javascript]  view plain  copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html>  
  8. <head>  
  9.     <meta name="viewport" content="width=device-width" />  
  10.     <title>PriceLclLog</title>  
  11.      @Html.Partial("_JsCss")  
  12.     <script src="~/Scripts/Custom/highcharts.js"></script>  
  13. </head>  
  14. <body>  
  15.         <div id="tb" style="height: auto">  
  16.         <h>起始日期：</h>  
  17.         <input style="width: 100px;" class="Wdate" id="Starttime" name="Starttime" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" />  
  18.         <h>截止日期：</h>  
  19.         <input style="width: 100px;" class="Wdate" id="Endtime" name="Endtime" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" />  
  20.         <input οnclick="searchClick();" type="button" value="检索" />  
  21.     </div>  
  22.       <div id="container" style="min-width: 400px; height: 300px; margin: 0 auto">  
  23.   
  24.       </div>    
  25.      <div id="container2" style="min-width: 400px; height: 300px; margin: 0 auto">  
  26.   
  27.       </div>    
  28.      <div id="container3" style="min-width: 400px; height: 300px; margin: 0 auto">  
  29.   
  30.       </div>    
  31. </body>  
  32. </html>  
  33.   
  34. <script>  
  35.   
  36.     $(function () {  
  37.   
  38.           
  39.         $.ajax({  
  40.             url: '/CompanysRepositoryLog/GetTongjiByCompanys',  
  41.             type: "post",  
  42.             success: function (data) {  
  43.                 createchartsdata(data);  
  44.                 createchartsdata2(data);  
  45.             }  
  46.         });  
  47.   
  48.     });  
  49.   
  50.   
  51.     function createchartsdata(data)  
  52.     {  
  53.         var categories = [];  
  54.         var cdata = [];  
  55.         $.each(data.rows, function (index, item) {  
  56.             if (index <= 25) {  
  57.                 categories.push(item.Country);  
  58.                 cdata.push(item.Count);  
  59.             }  
  60.         });  
  61.         createcharts(categories, cdata);  
  62.     }  
  63.   
  64.   
  65.     function createchartsdata2(data) {  
  66.         var categories = [];  
  67.         var cdata = [];  
  68.         $.each(data.rows, function (index, item) {  
  69.             if (index > 25 && index <= 50) {  
  70.                 categories.push(item.Country);  
  71.                 cdata.push(item.Count);  
  72.             }  
  73.         });  
  74.         createcharts2(categories, cdata);  
  75.     }  
  76.   
  77.   
  78.   
  79.     function createcharts(categories,_data)  
  80.     {  
  81.         $('#container').highcharts({  
  82.             chart: {  
  83.                 type: 'column'  
  84.             },  
  85.             title: {  
  86.                 text: '海外直客热点图',  
  87.                 labels: {  
  88.                     style: {  
  89.                         color: '#000'  
  90.                     },  
  91.                     color: '#000'  
  92.                 }  
  93.             },  
  94.             //subtitle: {  
  95.             //    text: '5月份'  
  96.             //},  
  97.             xAxis: {  
  98.                 categories: categories  
  99.             },  
  100.             yAxis: {  
  101.                 min: 0,  
  102.                 title: {  
  103.                     text: '点击数量'  
  104.                 }  
  105.             },  
  106.             tooltip: {  
  107.                 headerFormat: '<span style="font-size:10px">{point.key}</span>',  
  108.                 pointFormat: '' +  
  109.                     '',  
  110.                 footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f} 次</b></td></tr></tbody></table>',  
  111.                 shared: true,  
  112.                 useHTML: true  
  113.             },  
  114.             plotOptions: {  
  115.                 column: {  
  116.                     pointPadding: 0.2,  
  117.                     borderWidth: 0  
  118.                 }  
  119.             },  
  120.             series: [{  
  121.                 name: '国家',  
  122.                 data: _data,  
  123.                 dataLabels: { //显示数值  
  124.                     enabled: true,  
  125.                     color: '#666666'  
  126.                 }  
  127.             }  
  128.             ]  
  129.         });  
  130.     }  
  131.   
  132.     function createcharts2(categories, _data) {  
  133.         var colors = Highcharts.getOptions().colors;  
  134.         $('#container2').highcharts({  
  135.             chart: {  
  136.                 type: 'column'  
  137.             },  
  138.             title: {  
  139.                 text: '海外直客热点图'  
  140.             },  
  141.             //subtitle: {  
  142.             //    text: '5月份'  
  143.             //},  
  144.             xAxis: {  
  145.                 categories: categories  
  146.             },  
  147.             yAxis: {  
  148.                 min: 0,  
  149.                 title: {  
  150.                     text: '点击数量'  
  151.                 }  
  152.             },  
  153.             tooltip: {  
  154.                 headerFormat: '<span style="font-size:10px">{point.key}</span>',  
  155.                 pointFormat: '' +  
  156.                     '',  
  157.                 footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f} 次</b></td></tr></tbody></table>',  
  158.                 shared: true,  
  159.                 useHTML: true  
  160.             },  
  161.             plotOptions: {  
  162.                 column: {  
  163.                     pointPadding: 0.2,  
  164.                     borderWidth: 0  
  165.                 }  
  166.             },  
  167.             series: [{  
  168.                 name: '国家',  
  169.                 data: _data,  
  170.                 dataLabels: {  
  171.                     enabled: true,  
  172.                     color: '#666666'  
  173.                 }  
  174.                 //color: colors[2]  //修改柱状图颜色  
  175.             }  
  176.             ]  
  177.         });  
  178.     }  
  179. </script>  


[javascript]  view plain  copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html>  
  8. <head>  
  9.     <meta name="viewport" content="width=device-width" />  
  10.     <title>PriceLclLog</title>  
  11.      @Html.Partial("_JsCss")  
  12.     <script src="~/Scripts/Custom/highcharts.js"></script>  
  13. </head>  
  14. <body>  
  15.         <div id="tb" style="height: auto">  
  16.         <h>起始日期：</h>  
  17.         <input style="width: 100px;" class="Wdate" id="Starttime" name="Starttime" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" />  
  18.         <h>截止日期：</h>  
  19.         <input style="width: 100px;" class="Wdate" id="Endtime" name="Endtime" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" />  
  20.         <input οnclick="searchClick();" type="button" value="检索" />  
  21.     </div>  
  22.       <div id="container" style="min-width: 400px; height: 300px; margin: 0 auto">  
  23.   
  24.       </div>    
  25.      <div id="container2" style="min-width: 400px; height: 300px; margin: 0 auto">  
  26.   
  27.       </div>    
  28.      <div id="container3" style="min-width: 400px; height: 300px; margin: 0 auto">  
  29.   
  30.       </div>    
  31. </body>  
  32. </html>  
  33.   
  34. <script>  
  35.   
  36.     $(function () {  
  37.   
  38.           
  39.         $.ajax({  
  40.             url: '/CompanysRepositoryLog/GetTongjiByCompanys',  
  41.             type: "post",  
  42.             success: function (data) {  
  43.                 createchartsdata(data);  
  44.                 createchartsdata2(data);  
  45.             }  
  46.         });  
  47.   
  48.     });  
  49.   
  50.   
  51.     function createchartsdata(data)  
  52.     {  
  53.         var categories = [];  
  54.         var cdata = [];  
  55.         $.each(data.rows, function (index, item) {  
  56.             if (index <= 25) {  
  57.                 categories.push(item.Country);  
  58.                 cdata.push(item.Count);  
  59.             }  
  60.         });  
  61.         createcharts(categories, cdata);  
  62.     }  
  63.   
  64.   
  65.     function createchartsdata2(data) {  
  66.         var categories = [];  
  67.         var cdata = [];  
  68.         $.each(data.rows, function (index, item) {  
  69.             if (index > 25 && index <= 50) {  
  70.                 categories.push(item.Country);  
  71.                 cdata.push(item.Count);  
  72.             }  
  73.         });  
  74.         createcharts2(categories, cdata);  
  75.     }  
  76.   
  77.   
  78.   
  79.     function createcharts(categories,_data)  
  80.     {  
  81.         $('#container').highcharts({  
  82.             chart: {  
  83.                 type: 'column'  
  84.             },  
  85.             title: {  
  86.                 text: '海外直客热点图',  
  87.                 labels: {  
  88.                     style: {  
  89.                         color: '#000'  
  90.                     },  
  91.                     color: '#000'  
  92.                 }  
  93.             },  
  94.             //subtitle: {  
  95.             //    text: '5月份'  
  96.             //},  
  97.             xAxis: {  
  98.                 categories: categories  
  99.             },  
  100.             yAxis: {  
  101.                 min: 0,  
  102.                 title: {  
  103.                     text: '点击数量'  
  104.                 }  
  105.             },  
  106.             tooltip: {  
  107.                 headerFormat: '<span style="font-size:10px">{point.key}</span>',  
  108.                 pointFormat: '' +  
  109.                     '',  
  110.                 footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f} 次</b></td></tr></tbody></table>',  
  111.                 shared: true,  
  112.                 useHTML: true  
  113.             },  
  114.             plotOptions: {  
  115.                 column: {  
  116.                     pointPadding: 0.2,  
  117.                     borderWidth: 0  
  118.                 }  
  119.             },  
  120.             series: [{  
  121.                 name: '国家',  
  122.                 data: _data,  
  123.                 dataLabels: { //显示数值  
  124.                     enabled: true,  
  125.                     color: '#666666'  
  126.                 }  
  127.             }  
  128.             ]  
  129.         });  
  130.     }  
  131.   
  132.     function createcharts2(categories, _data) {  
  133.         var colors = Highcharts.getOptions().colors;  
  134.         $('#container2').highcharts({  
  135.             chart: {  
  136.                 type: 'column'  
  137.             },  
  138.             title: {  
  139.                 text: '海外直客热点图'  
  140.             },  
  141.             //subtitle: {  
  142.             //    text: '5月份'  
  143.             //},  
  144.             xAxis: {  
  145.                 categories: categories  
  146.             },  
  147.             yAxis: {  
  148.                 min: 0,  
  149.                 title: {  
  150.                     text: '点击数量'  
  151.                 }  
  152.             },  
  153.             tooltip: {  
  154.                 headerFormat: '<span style="font-size:10px">{point.key}</span>',  
  155.                 pointFormat: '' +  
  156.                     '',  
  157.                 footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f} 次</b></td></tr></tbody></table>',  
  158.                 shared: true,  
  159.                 useHTML: true  
  160.             },  
  161.             plotOptions: {  
  162.                 column: {  
  163.                     pointPadding: 0.2,  
  164.                     borderWidth: 0  
  165.                 }  
  166.             },  
  167.             series: [{  
  168.                 name: '国家',  
  169.                 data: _data,  
  170.                 dataLabels: {  
  171.                     enabled: true,  
  172.                     color: '#666666'  
  173.                 }  
  174.                 //color: colors[2]  //修改柱状图颜色  
  175.             }  
  176.             ]  
  177.         });  
  178.     }  
  179. </script>  
wumingwuxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript使用smipleChart实现简单图表
10-24
主要介绍了javascript使用smipleChart实现简单图表的方法及示例分享,需要的朋友可以参考下
qt 使用 echarts图表
04-21
qt 使用 echarts图表
FusionCharts图表组件简单使用
08-06
FusionCharts图表组件简单使用
heightchart图表
11-06
heightchart图表 根目录heightchart文件夹下example.html是我看到的例子
react-hightChart:基本react hightCharts图表
05-18
creat-react-app React高图 npm安装 npm运行开始
MFC high-speed-charting控件使用（添加垂直游标，两个控件的联动）
wangdatou134的博客
04-28 2175
MFC high-speed-charting控件使用（添加垂直游标，两个控件的联动） 应用场景 最近参与的一个项目中涉及到在一个对话框中添加两个high-speed-charting控件，在两个控件中添加dragline游标，并要求： 光标不可越过其左右游标且不能拖到控件外； 拖动其中一个控件中的dragline游标时，另一个控件中对应游标也移动。 控件的基础使用 参考了大神尘中远的博客TeeChart替代品，MFC下好用的高速绘图控件-(Hight-Speed Charting)，详细讲述了如何添加
一文带你快速上手Highcharts框架
Shids_的博客
04-28 4556
一文带你快速上手Highcharts框架
实现全屏操作
lizhi1030的博客
05-08 538
data() { return { isShowFullScreen: true, // 全屏or退出全屏标志 doc: document.documentElement } }, keyUp(element) { this.isShowFullScreen = !this.isShowFullScreen if (element.req...
vue3 | HighCharts实战自定义封装之径向条形图
weixin_42974827的博客
09-18 4227
在做数据平台开发时候，大数据驱动页面的情况很常见，并且大数据的展示，一般以图表类，居多，掌握一种图表往往不够，比如会echarts，但是 echarts有很多图表效果满足不了需求，就如现在我开发的径向条形图，echarts很难实现，学习highcharts是有成本的，本文能希望能你在highchart的使用上有所帮助。通过一种使用，其他的举一反三，还有不懂的可以评论区留言告诉我，我会有时间及时回复。未完待续，后续将会带来大屏可视化的动态实时数据如何展示？敬请期待～～～❤️❤️❤️。
Highcharts之自定义标签
热门推荐
学会改变自己——才能突破
08-29 1万+
前边有看过FusionChartsFree(Flash+JS+XML三项技术结合来显示图表：柱状图，折线图，饼图等等),JFreeChart(利用Java语言来实现的各种图形的展示)。而这篇博客我们来看另一种图表显示工具Highcharts(纯粹利用JS来实现各种图表的展示)。         看一张官网上的图片：          通过这张图，来简单介绍一下Highcharts可以实现的功能，或
CreateCharts_XLSReadWriteII20_XLSReadWriteII_
10-01
XLSReadWriteII 2.0 create charts sample
higthcharts
09-04
higthcharts JS 代码,
Hightcharts 案例 图表 报表
12-09
HightCharts小案例 教你怎样使用
Highcharts使用指南
weixin_34037515的博客
01-24 745
摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。   目录 前言（Preface） 安装（Installation） 如何设置参数（How to set up the options） 预处理参数（Preprocess th...
Highcharts图表结构分析：详解坐标轴及其类型
z69183787的专栏
03-05 4873
Highcharts所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过chart.inverted = true 可以让x，y轴显示位置对调。下图为图表中坐标轴组成部分。 一、坐标轴组成部分 轴标题-Axis Title 坐标轴标题。默认情况下，x轴为null（也就是没有title），y轴为'
学习并记录，Highcharts应用中的些许问题
baidu_18324319的专栏
12-09 1256
Highcharts应用中些许问题
HightCharts使用详解
m0_37027631的博客
09-12 2843
HightCharts详解：   百度百科： HighCharts[1]  界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为Highcharts-4.2.3。[2]  一、HightCharts优点 首先、使用Highchar
Highcharts插件常用配置
nann-viiv 的博客
01-14 780
拿柱状图来做例子： 引入js "/assets/module/Highcharts-8.1.2/code/highcharts.js" "/assets/module/Highcharts-8.1.2/code/modules/oldie.js" "/assets/module/Highcharts-8.1.2/code/modules/exporting.js" <div id="container"></div> 配置js var chart = Highcharts
HighCharts中添加一条会随着鼠标移动的竖线(crosshairs)
CHEN的技术积累
09-22 1万+
HighCharts中添加一条会随着鼠标移动的竖线crosshairs
echart数据图表控件使用
最新发布
04-28
使用 JavaScript 代码创建一个图表对象，指定要绘制的图表类型和容器。 5. 配置图表参数 通过设置图表对象的参数，如标题、图例、数据等，来控制图表的样式和显示效果。 6. 绘制图表 调用图表对象的绘制方法，将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值