DaiCuoBBs

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[jQuery] 強大的jQuery Chart组件-Highcharts

[复制链接]
admin 发表于 2020-1-10 17:24:32 | 显示全部楼层 |阅读模式

Highcharts是一个制作图表的纯Javascript类库,主要特性如下:

  • 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
  • 对个人用户完全免费;
  • 纯JS,无BS;
  • 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
  • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;
  • 提示功能:鼠标移动到图表的某一点上有提示信息;
  • 放大功能:选中图表部分放大,近距离观察图表;
  • 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
  • 时间轴:可以精确到毫秒

JsonData
  1. {
  2.         "x": ["20200104", "20200105", "20200106", "20200107", "20200108", "20200109", "20200110"],
  3.         "y": [291240, 260476, 260209, 256571, 249753, 232610, 174058]
  4. }
复制代码

Javascript($datax,$dxtay分别为json数据)
  1. var canvas = {
  2.         "load" : function($datax,$dxtay){
  3.                 if($(".canvas").eq(0).length){
  4.                         $.ajaxSetup({
  5.                                 cache: true
  6.                         });
  7.                         $.getScript("//lib.baomitu.com/Chart.js/2.7.2/Chart.min.js", function(script, textStatus, jqXHR) {
  8.                                 canvas.show($datax,$dxtay);
  9.                         });
  10.                 }
  11.         },
  12.         "ajax" : function($url){
  13.                 $.ajax({
  14.                         type: 'get',
  15.                         cache: false,
  16.                         url: $url,
  17.                         //dataType: 'json',
  18.                         timeout: 3000,
  19.                         success:function($json){
  20.                                 canvas.show($json.x,$json.y);
  21.                         }
  22.                 });
  23.         },
  24.         "show" : function($datax,$dxtay){
  25.                 $(".canvas canvas").remove();
  26.                 $('.canvas').append('<canvas class="my-4 w-100" id="myChart" height="380"></canvas>');
  27.                 var myChart = new Chart($('canvas'), {
  28.                         type: 'line',
  29.                         data: {
  30.                                 labels: $datax,
  31.                                 datasets: [{
  32.                                         data: $dxtay,
  33.                                         lineTension: 0,
  34.                                         backgroundColor: 'transparent',
  35.                                         borderColor: '#007bff',
  36.                                         borderWidth: 4,
  37.                                         pointBackgroundColor: '#007bff'
  38.                                 }]
  39.                         },
  40.                         options: {
  41.                                 scales: {
  42.                                         yAxes: [{
  43.                                                 ticks: {
  44.                                                         beginAtZero: false
  45.                                                 }
  46.                                         }]
  47.                                 },
  48.                                 legend: {
  49.                                         display: false,
  50.                                 }
  51.                         }
  52.                 });
  53.         }
  54. }
复制代码



您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|呆错站长论坛

GMT+8, 2020-11-27 14:44 , Processed in 0.055732 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表