澳门新浦京电子游戏4个顶级开源JavaScript图表库_JavaScript_脚本之家

本文由码农网 –
小峰原创翻译,转载请看清文末的转发须求,应接出席大家的付费投稿安顿!

图表对于可视化数据和使网址有着吸重力特别关键。可视化演示使分析大块数据和流言音信变得更其便于。JavaScript图表库令你可以看到以便于通晓和彼此的章程可视化数据,并改革网站的安顿性。有八个甲级开源JavaScript图表库,你早晚要Get!

jQuery Chart图表制作零件Highcharts用法安详严整,jqueryhighcharts

正文实例陈述了jQuery
Chart图表制作零器件Highcharts用法。分享给我们供我们参照他事他说加以考察,具体如下:

Highcharts是三个营造图纸的纯Javascript类库,重要特征如下:

① 包容性:包容当今持有的浏览器,包涵小米、IE和火狐等等;
② 对个人顾客完全无偿;
③ 纯JS,无BS;

援救超过一半的图纸类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、传布图;

跨语言:不管是PHP、Asp.net照旧Java都得以利用,它只须要两个文件:二个是Highcharts的中坚文件highcharts.js,还会有a
canvas emulator for IE和Jquery类库也许MooTools类库;
⑥ 指示成效:鼠标移动到图片的某一点上有提醒消息;
⑦ 放大功能:选中图表部分放大,中远间距观望图表;

易用性:不须求要新鲜的费用技能,只必要安装一下采摘就足以制作适合自身的图片;
⑨ 岁月轴:能够正确到纳秒

下载插件

Highcharts下载地址

jquery下载地址

这次介绍是把highcharts中的第三个文本拷贝过来,然后把其余的成效加在了那么些文件中,然后查询相关材质,导出图片格式没有须求连到官方服务器了,只须求在该地就足以。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="highchart_export_module_asp_net._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Highchart js export module sample</title>
  <!-- 1.引入jquery库 -->
  <script src="Javascript/jquery-1.5.1.js" type="text/javascript"></script>
  <!-- 2.引入highcharts的核心文件 -->
  <script src="http://highcharts.com/js/highcharts.js" type="text/javascript"></script>
  <!-- 3.引入导出需要的js库文件 -->
  <script src="http://highcharts.com/js/modules/exporting.js" type="text/javascript"></script>
</head>
<script language="javascript" type="text/javascript">
  var chart;
  $(document).ready(function () {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        defaultSeriesType: 'line', //图表类别,可取值有:line、spline、area、areaspline、bar、column等
        marginRight: 130,
        marginBottom: 25
      },
      title: {
        text: 'Monthly Average Temperature', //设置一级标题
        x: -20 //center
      },
      subtitle: {
        text: 'Source: WorldClimate.com', //设置二级标题
        x: -20
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//设置x轴的标题
      },
      yAxis: {
        title: {
          text: 'Temperature (°C)' //设置y轴的标题
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        formatter: function () {
          return '<b>' + this.series.name + '</b><br/>' +
        this.x + ': ' + this.y + '°C'; //鼠标放在数据点的显示信息,但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right', //设置说明文字的文字 left/right/top/
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
      },
      exporting: {
        enabled: true, //用来设置是否显示‘打印','导出'等功能按钮,不设置时默认为显示
        url: "http://localhost:49394/highcharts_export.aspx" //导出图片的URL,默认导出是需要连到官方网站去的哦
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true //显示每条曲线每个节点的数据项的值
          },
          enableMouseTracking: false
        }
      },
      series: [{
        name: 'Tokyo', //每条线的名称
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]//每条线的数据
      }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
      }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }]
    });
  });
  </script>
<body>
  <form id="form1" runat="server">
  <!--5.导入容器用于显示图表-->
  <div id="container" style="width: 900px;">
  </div>
  </form>
</body>
</html>

澳门新浦京电子游戏 1

导出的图片格式

澳门新浦京电子游戏 2

能够成功页面展现和导出的图片相同了。

PS:这里再为大家推荐四款代码格式化、美化学工业具,相信大家在后头的开辟进度中会用赢得:

在线JavaScript代码美化、格式化学工业具:

JavaScript压缩/格式化/加密工具:

XML代码在线格式化美化学工业具:

json代码在线格式化/美化/压缩/编辑/调换工具:

在线JSON代码核准、核算、美化、格式化工具:

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery常用插件及用法计算》、《jquery中Ajax用法总括》、《jQuery表格(tableState of Qatar操作技巧汇总》、《jQuery拖拽特效与技术总计》、《jQuery扩张本事总计》、《jQuery多如牛毛优秀特效汇总》、《jQuery动漫与特功能法总括》及《jquery采纳器用法总计》

仰望本文所述对我们jQuery程序设计有所帮忙。

Chart图表制作构件Highcharts用法详整,jqueryhighcharts
本文实例陈述了jQuery
Chart图表制作零器件Highcharts用法。分享给大家供我们参照他事他说加以考察,具体如…

用PHP完成专门的学问级的依附Web的图形,而不需求深入的HTML5和JavaScript知识。

1.Chart.js

介绍

那二日,作者急需从生机勃勃组PHP数据组快捷创立图表。须要图表必得是交互作用式的,客商本身的,也可下载的。在评估了部分PHP图表的消除方案,包含phpChart、pChart和Highcharts之后,小编主宰运用phpChart作为自个儿的首推工具。

Chart.js是三个开源JavaScript库,允许你在应用程序上开创动漫,美观和人机联作式图表。它能够在MIT许可下得到。

背景

作为三个要害的后端程序员,作者既未有过多时光去渐渐研商利用JavaScript(客商想要在24钟头内就会在英特网看看图片),也不抱有先进的前端编码知识。从根本上说,小编愿意大概从未别的前端编制程序经验的PHP开采人员也能够神速支付出了不起的图样。

作者试过pChart,三个风行的PHP图表库。生成的图片看起来挺不错,即使是可下载的,但图表都以静态图像。Highcharts就像是最棒的取舍。图表看上去令人惊艳,又是卡通片的,並且有那多少个自定义选项,但还要,它也是非常复杂的,并且亟需多量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务亦非无需付费的。

选择Chart.js,你能够成立各样让人记念深远的图片和图纸,满含条形图,折线图,面积图,线性比例和散点图。它完全响应各样道具,并动用HTML5
Canvas元素进行渲染。

phpChart的基本要素

自笔者最心爱phpChart的地点正是它能令人从简单和最少许的代码动手。

phpChart简洁明了版能够从这里下载。下载文件并解压到网站根目录。

设置conf.php

我们要做的首先件事是安装变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在您的Web服务器上的phpChart库的相对或相对ULANDL。

define('SCRIPTPATH','/phpChart/');

始建最轻便易行的图纸

包含PHP头文件conf.php:

require_once("../conf.php");

调用构造函数C_PhpChartX,最后调用draw(State of Qatar函数。

$pc=new C_PhpChartX(array(array(123, 34, 51, 22, 3)), ‘simplest_graph’);
$pc->draw();

那便是初叶你须要的代码。上边是经过渲染的出口。

澳门新浦京电子游戏 3

那正是自己所谓的最小量的编码。当你有一个团队的程序员来职业的时候,勤奋地去读书基本功就从未有过意义了。任何技术员尽快想要做的生机勃勃件事就是从生机勃勃组新的库或工具埋头讨论复杂的文书档案。

顺便说一句,布局函数中的第二个参数的命名对你的图形来讲应该是独一无二的。作者键入的是“simplest_graph”,也能够是其余非空格字符串。它必得是一个唯后生可畏的值,那样您才具够在一个页面中负有多个图表。

以下是行使库绘制条形图的身体力行代码。大家将使用Chart.js内容交给互连网将其包罗在那示例中。请留意,使用的数额仅用于证解热的。

丰富题目

您应有为您的图形增添标题,以便客商知道她们在看怎样。

$pc->set_title(array('text'=>’My Simplest Graph'));
new Chart(document.getElementById, {type: 'bar',data: {labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],datasets: [{label: "Number of developers ",backgroundColor: ["red", "blue","yellow","green","pink"],data: [7,4,6,9,3]}]},options: {legend: { display: false },title: {display: true,text: 'Number of Developers in Every Continent'},scales: {yAxes: [{ticks: {beginAtZero:true}}]}}});

加上卡通

pChart做不到的里边生龙活虎件事正是卡通片。在phpChart中,动漫补助通过轻巧地调用set_animate和传递true值就可以使用。

$pc->set_animate(true);

便是那样。当时您的图样应该早本来就有所了标题和卡通片。完整的代码如下:

$pc = new C_PhpChartX(array(array(123, 34, 51, 22, 3)),'simplest_graph');
$pc->set_animate(true);
$pc->set_title(array('text'=>'My Simplest Graph'));
$pc->draw();

从这段代码中能够阅览,通过将品种设置为bar来协会条形图。你能够将条形的趋向改换为任何门类,举个例子将type设置为horizontalBar。

代码实质

如果您在浏览器中查阅来源,你会意识,phpChart自动富含了众多的JavaScript甚至CSS文件,满含jquery.js、jquery-ui,和jqplot.js、jquery-ui.css等。就算图表在浏览器中经过客户端的JavaScript渲染,但在前端的代码完全都以PHP。

据此受人款待是因为那样一来对于自身——四个PHP开采人士来讲就不再也急需顾忌JavaScript了,因为phpChart会为自身机动处理。下边是在查看源代码时生成的整套JavaScript代码——是笔者眼下四行PHP代码的结果。

<script language="JavaScript" type="text/javascript"> 
     var _simplest_graph_plot_properties;
    $(document).ready(function(){ 
    setTimeout( function() { 
    _simplest_graph_plot_properties = {
    "title":{
    "text":"My Simplest Graph","show":1
    },"animate":true,"animateReplot":true
    }

    $.jqplot.config.enablePlugins = true;
    $.jqplot.config.defaultHeight = 300;
    $.jqplot.config.defaultWidth = 400;
    _simplest_graph= $.jqplot("simplest_graph", 
           [[123, 34, 51, 22, 3]], _simplest_graph_plot_properties);

    }, 200 );
    });
</script>

正如你可能也会当心到的,“simplest_graph``”被用作JavaScript变量的生机勃勃有的,如 _simplest_graph_plot_properties代表jqplot对象。那正是眼下笔者所说的命名必需唯豆蔻梢头的原故。

别的,该PHP数据组被活动调换为JavaScript数组,所以以下PHP数组:

array(array(123, 34, 51, 22, 3))

成为JavaScript数组:

[[123,34,51,22,3]]

经过在backgroundColor数组参数中提供颜色类型来安装条形图的颜料。

变动渲染器类型

PhpChart援救贯彻柱形图、折线图和货仓图;带状线图;块图;气泡图;蜡烛图;gecko图;meter图;以至任何几类别型的图形。渲染器支持:

  • BarRenderer
  • BezierCurveRenderer
  • BlockRenderer
  • BubbleRenderer
  • CanvasAxisLabelRenderer
  • CanvasAxisTickRenderer
  • CategoryAxisRenderer
  • DateAxisRenderer
  • DonutRenderer
  • EnhancedLegendRenderer
  • FunnelRenderer
  • LogAxisRenderer
  • MekkoAxisRenderer
  • MekkoRenderer
  • MeterGaugeRenderer
  • OHLCRenderer
  • PyramidAxisRenderer
  • PieRenderer

生机勃勃旦你不钦点项指标话,暗中认可图表类型是折线图。要改过图表类型,必要调用set_series_default函数。比如,将下边包车型地铁例子改进为饼图

$pc->set_series_default(array('renderer'=>'plugin::PieRenderer'));

澳门新浦京电子游戏 4

请在意,小编用的是phpChart集团版。 phpChart精短版只扶植折线图。

颜色分配给在对应数组中国共产党享相近索引的价签和数量。比如,第叁个标签“拉美”将安装为“金色”。

数组和命名约定

此地还恐怕有风流浪漫对值得注意的地点。首先,phpChart函数中央银行使的大致具备参数是一个数组,不是任何,但大致具备的都以。只需记住那或多或少,就会幸免调节和测量试验时的大气讨厌难题(前面作者将简要地覆盖调节和测量检验效率)。其次,渲染器在phpChart中被叫做“插件”,故而你必须要像那样传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

2.Chartist.js

高级phpChart:自定义JavaScript

到前段时间结束,全数笔者出示的都是PHP。在繁多情状下,对于简易的PHP函数调用,phpChart完全能做得很好。为了丰裕利用phpChart,你只怕会想要使用自定义JavaScript。举例,你能够用phpChart从JavaScript函数和表面源加载数据。

下面的sineRenderer是三个自定义JavaScript函数,用于定义从黄金年代组随机数字显示示正弦值。然后传递给set_data_renderer函数。

PHP:

$data1 = array();
$pc = new C_PhpChartX(array($data1),'basic_chart_4');
$pc->set_title(array('text'=>'Basic Chart with Custom JS'));
$pc->set_data_renderer("js::sineRenderer");
$pc->add_plugins(array('pointLabels'));
$pc->set_animate(true);
$pc->draw();

JavaScript:

sineRenderer = function() {
    var data = [[]];
    for (var i=0; i<13; i+=0.5) {
      data[0].push([i, Math.sin(i)]);
    }
    return data;
  };

想要知道set_data_renderer函数的愈来愈多内容可点击这里:http://phpchart.org/phpChart/docs/output/C_PhpChartX_set_data_renderer@.html

澳门新浦京电子游戏 5

Chartist.js是三个总结的JavaScript动漫库,允许你创建可自定义和姣好的响应图表和别的安排。开源库可在WTFPL或MIT许可下得到。

导出图表到图片

刚起首的时候,对此作者很麻烦,因为自己不知情怎么着导出图表。事实注解,phpChart图表能够导出为可下载的图形,但这些历程并从未很好的记录下来。作者发觉增添以下代码到全部页面包车型地铁尾巴部分,就足以逆转:

<script type="text/javascript" 
  src="http://www.codeproject.com/phpChart/js/showjs.js"></script>

下载showjs.js:

该库是由一批对现存图表工具不向往的开辟职员开采的,因而它为设计职员和开采职员提供了要得的意义。

调试phpChart

末段,在停止以前,笔者要提生机勃勃提phpChart的贰个充裕谭何轻巧的特色。那正是它的内置调试功用。在其网址上,全体的在线例子()都有调整能够启用生动的身体力行和五个清楚的可方便移植下边代码的选项卡——分别是JavaScript和PHP。

要启用调节和测验,只需增添以下代码行到conf.php文件:

define('DEBUG', true);

在项目中带有Chartist.js库及其CSS文件后,你可以选取它们创造各种类型的图形,包含动漫,条形图和折线图。它应用SVG动态渲染图表。

最后的思考

PhpChart的一个首要受益是,通过利用这些工具,PHP技士能够兑现专门的学业级的依照Web的图形——而无需深远驾驭HTML5和JavaScript知识。

假使您像笔者同样,也是前面二个编制程序的门外汉,但相近需求生成交互作用式的Web图表,那么您或者会赏识phpChart。关于phpChart的HTML5图纸例子已经全体地罗列到以下那个页面中。运气好的话,你大概并没有必要文书档案——就足以一向精晓代码。

以下是使用库绘制饼图的代码示例

.ct-series-a .ct-slice-pie {fill: hsl; /* filling pie slices */stroke: white; /*giving pie slices outline */stroke-width: 5px; /* outline width */}.ct-series-b .ct-slice-pie {fill: hsl;stroke: white;stroke-width: 5px;}.ct-series-c .ct-slice-pie {fill: hsl;}.ct-series-d .ct-slice-pie {fill: hsl;}.ct-series-e .ct-slice-pie {fill: hsl;}var data = {series: [45, 35, 20]};var sum = function { return a + b };new Chartist.Pie('.ct-chart', data, {labelInterpolationFnc: function {return Math.round(value / data.series.reduce;

Chartist
JavaScript库允许你利用各样预创设的CSS样式,并不是钦点项指标各个与体制相关的构件。你能够运用它们来调节创制的图样的外观。

譬喻说,预先创造的CSS类.ct-chart用于营造饼图的容器。何况,.ct-golden-section类用于获取宽高比,能够应用响应式设计开展缩放,并为你节省总工会计固定尺寸的劳动。Chartist还提供了你能够在项目中央银行使的别的类其余器皿比率。

要安装各样饼图样式,能够选取暗许的.ct-series-a类。字母a与各种类别计数一齐迭代,使得它与要安装样式的切块相对应。

Chartist.Pie方法用于创制饼图。要创设另黄金年代种档案的次序的图纸,举个例子折线图,请使用Chartist.Line。

3.D3.js

D3.js是另一个很棒的开源JavaScript图表库。它能够在BSD许可下使用。D3首要用来依据提供的数据调整和添Gavin档的交互作用性。

你能够使用这几个奇妙的3D动漫库,使用HTML5,SVG和CSS可视化你的多少,让网站更具吸重力。从实质上讲,D3使您可以将数据绑定到文书档案对象模型,然后利用基于数据的函数来改动文书档案。

以下是利用库绘制轻巧条形图的示范代码

.chart div {font: 15px sans-serif;background-color: lightblue;text-align: right;padding:5px;margin:5px;color: white;font-weight: bold;}var data = [342,222,169,259,173];d3.select.selectAll.enter.style{ return d + "px"; }).text { return d; });使用D3库的主要概念是首先应用CSS样式选择指向DOM节点,然后应用运算符来操作它们,就像在其他DOM框架中一样。将数据绑定到文档后,将调用.enter()函数来为传入数据构建新节点。在.enter()函数之后调用的所有方法都将为数据中的每个项调用。4.EChartsECharts 由百度前端技术部开发的,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts 有良好的自适应效果,ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。JavaScript图表库为你提供了强大的工具,用于在Web属性上实现数据可视化。通过这四个开源库,你可以增强网站的美感和互动性。你还有其他强大的前端库来创建JavaScript动画效果吗?不妨分享!总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注