JS Chart jqplot RGraph 对比

操作系统： android 2.3

程序框架： phonegap + jquery mobile

三种图表插件： JS Chart 、 RGraph 、jqplot

	JS Chart	RGraph	jqplot
依赖js库	无	无	Jquery
优点	使用简单，文档丰富，功能强大，美观，有动态效果	使用较简单，文档一般，有动态效果	使用较简单，文档较全
缺点	饼图无动态生成效果，个人版有水印	低端设备运行动态效果不流畅	无动态生成效果
是否免费	个人免费	是	是

chart.html

<!DOCTYPE html>

<html>

<head>

<!-- <link href="js/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>

-->

</head>

<body >

<h1>chart</h1>

</div>

图表

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

chart.js

function drawBarChart(containerid){

var chartContainer = $("#"+containerid);

chartContainer.html("");

var html ="";

if(window.screen.width > 400){

html += " <canvas id='mychart' style='background-color: transparent;' width='480' height='300'>";

}else{

html += " <canvas id='mychart' style='background-color: transparent;' width='320' height='300'>";

}

html += "</canvas>";

chartContainer.html(html);

chartContainer.trigger("create");

var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];

var myGraph = new RGraph.Bar('mychart', data);

myGraph.Set('chart.labels', ['11111月','2月','3月','4月','5月','6月',

'7月','8月','9月','10月','11月','12月']) ;

myGraph.Set('chart.gutter',25);

myGraph.Set('chart.title',"RGRAPH CHART");

myGraph.Set('chart.text.angle', 30);

myGraph.Set('chart.gutter.left', 60);

RGraph.Effects.Bar.Grow(myGraph);

};

function drawPieChart(containerid){

var chartContainer = $("#"+containerid);

chartContainer.html("");

var html ="";

if(window.screen.width > 400){

html += " <canvas id='mychart' style='background-color: transparent;' width='480' height='300'>";

}else{

html += " <canvas id='mychart' style='background-color: transparent;' width='320' height='300'>";

}

html += "</canvas>";

chartContainer.html(html);

chartContainer.trigger("create");

var pie = new RGraph.Pie('mychart', [9,5,12,8,4,9]);

pie.Set('chart.strokestyle', '#e8e8e8');

pie.Set('chart.linewidth', 5);

pie.Set('chart.shadow', true);

pie.Set('chart.shadow.blur', 5);

pie.Set('chart.shadow.offsety', 5);

pie.Set('chart.shadow.offsetx', 5);

pie.Set('chart.shadow.color', '#aaa');

pie.Set('chart.exploded', 2);

pie.Set('chart.radius', 80);

pie.Set('chart.title',"RGRAPH CHART");

pie.Set('chart.labels', ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget']);

pie.Set('char.labels.ingraph',true);

/*pie.Set('chart.labels.sticks', true);

pie.Set('chart.labels.sticks.length', 5);*/

RGraph.Effects.Pie.RoundRobin(pie, {frames:6});

};

function drawLineChart(containerid){

var chartContainer = $("#"+containerid);

chartContainer.html("");

var html ="";

if(window.screen.width > 400){

html += " <canvas id='mychart' style='background-color: transparent;' width='480' height='300'>";

}else{

html += " <canvas id='mychart' style='background-color: transparent;' width='320' height='300'>";

}

html += "</canvas>";

chartContainer.html(html);

chartContainer.trigger("create");

var line = new RGraph.Line("mychart", [5,4,1,6,8,5,3]);

line.Set('chart.labels', ['Mon','Tue','Wed','Thu','Fri','Sat','Sunday']);

line.Set('chart.title',"RGRAPH CHART");

line.Set('chart.text.angle', 30);

line.Set('chart.gutter.bottom', 60);

RGraph.Effects.Line.jQuery.Trace(line);

};

function drawPieChart2(containerid){

var myChart = new JSChart(containerid, 'pie', '');

myChart.setDataArray([['Sector 1', 2],['Sector 2', 1],['Sector 3', 3],['Sector 4', 6],['Sector 5', 9],['Sector 6', 10]]);

myChart.colorize(['#A186BE','#8781BD','#8393CA','#7DA7D9','#94BCEB','#BD8CBF']);

if(window.screen.width > 400){

myChart.setSize(480, 300);

}else{

myChart.setSize(320, 300);

}

myChart.setPieRadius(105);

myChart.setTitleColor('#413A7B');

myChart.setPieUnitsColor('#413A7B');

myChart.setPieUnitsFontSize(9);

myChart.setPieValuesFontSize(9);

myChart.draw();

};

function drawBarChart2(containerid){

var myChart = new JSChart(containerid, 'bar', '');

myChart.setDataArray([['Jun-04', 22.5],['Oct-04', 28],['Feb-05', 32],['Jun-05', 29],['Oct-05', 36],['Feb-06', 42],['Jun-06', 47],['Oct-06', 44],['Feb-07', 49]]);

myChart.colorize(['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#ECC049','#EC9649','#D97431','#D95531']);

if(window.screen.width > 400){

myChart.setSize(480,300);

}else{

myChart.setSize(320, 300);

}

myChart.setBarValues(false);

myChart.setBarSpacingRatio(45);

myChart.setBarOpacity(1);

myChart.setBarBorderWidth(0);

myChart.setTitle('Home broadband penetration');

myChart.setTitleFontSize(10);

myChart.setTitleColor('#607985');

myChart.setAxisValuesColor('#607985');

myChart.setGridOpacity(0.8);

myChart.draw();

};

function drawLineChart2(containerid){

var myChart = new JSChart(containerid, 'line', '');

myChart.setDataArray([[1, 180],[2, 140],[3, 150],[4, 110],[5, 120],[6, 90],[7, 145],[8, 70],[9, 80],[10, 180],[11, 175]]);

myChart.colorize(['#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9']);

if(window.screen.width > 400){

myChart.setSize(480,300);

}else{

myChart.setSize(320, 300);

}

myChart.setIntervalEndY(200);

myChart.setIntervalStartY(0);

myChart.setAxisValuesNumberY(5);

myChart.setTitle('Interactive line chart showing inverse of the normal cumulative distribution');

myChart.setTitleFontSize(10);

myChart.setTitleColor('#424342');

myChart.setAxisValuesColor('#444444');

myChart.setShowXValues(false);

myChart.setLabelX([1,'day1']);

myChart.setLabelX([2,'day2']);

myChart.setLabelX([3,'day3']);

myChart.setLabelX([4,'day4']);

myChart.setLabelX([5,'day5']);

myChart.setLabelX([6,'day6']);

myChart.setLabelX([7,'day7']);

myChart.setLabelX([8,'day8']);

myChart.setLabelX([9,'day9']);

myChart.setLabelX([10,'day10']);

myChart.setLabelX([11,'day11']);

myChart.setLineColor('#D92323');

myChart.setTooltip([1,'180']);

myChart.setTooltip([2,'140']);

myChart.setTooltip([3,'150']);

myChart.setTooltip([4,'110']);

myChart.setTooltip([5,'120']);

myChart.setTooltip([6,'90']);

myChart.setTooltip([7,'145']);

myChart.setTooltip([8,'80']);

myChart.setTooltip([9,'80']);

myChart.setTooltip([10,'180']);

myChart.setTooltip([11,'175']);

myChart.setFlagRadius(4);

myChart.draw();

};

function drawPieChart3(containerid){

var chartContainer = $("#"+containerid);

chartContainer.html("");

var mygrid= {

drawGridLines: true, // wether to draw lines across the grid or not.

gridLineColor: '#cccccc', // 设置整个图标区域网格背景线的颜色

background: 'rgba(0,0,0,0.0)', // 设置整个图表区域的背景色

borderColor: '#999999', // 设置图表的(最外侧)边框的颜色

borderWidth: 2.0, //设置图表的（最外侧）边框宽度

shadow: true, // 为整个图标（最外侧）边框设置阴影，以突出其立体效果

shadowAngle: 45, // 设置阴影区域的角度，从x轴顺时针方向旋转

shadowOffset:1.5, // 设置阴影区域偏移出图片边框的距离

shadowWidth: 3, // 设置阴影区域的宽度

shadowDepth: 3, // 设置影音区域重叠阴影的数量

shadowAlpha: 0.07, // 设置阴影区域的透明度

renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.

rendererOptions: {} // options to pass to the renderer. Note, the default

// CanvasGridRenderer takes no additional options.

} ;

var myoptions = {

title: 'Chart',

seriesDefaults: {

shadow: true,

renderer: jQuery.jqplot.PieRenderer,

rendererOptions: { showDataLabels: true }

legend: { show:true },

grid:mygrid

};

var mydata = [['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7],

['Out of home', 6],['Groothandel', 5], ['Grondstof', 4],

['Consument', 3], ['Bewerkende industrie', 2]];

jQuery.jqplot.config.enablePlugins = true;

jQuery.jqplot(containerid,

[mydata],

myoptions

);

};

function drawBarChart3(containerid){

var chartContainer = $("#"+containerid);

chartContainer.html("");

var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],

['SonOfBitch', 4],['Bitch', 6],['Shit', 2],

['Aston Martin', 5],['Rolls Royce', 6]];

var mygrid= {

drawGridLines: true, // wether to draw lines across the grid or not.

gridLineColor: '#cccccc', // 设置整个图标区域网格背景线的颜色

background: 'rgba(0,0,0,0.0)', // 设置整个图表区域的背景色

borderColor: '#999999', // 设置图表的(最外侧)边框的颜色

borderWidth: 2.0, //设置图表的（最外侧）边框宽度

shadow: true, // 为整个图标（最外侧）边框设置阴影，以突出其立体效果

shadowAngle: 45, // 设置阴影区域的角度，从x轴顺时针方向旋转

shadowOffset:1.5, // 设置阴影区域偏移出图片边框的距离

shadowWidth: 3, // 设置阴影区域的宽度

shadowDepth: 3, // 设置影音区域重叠阴影的数量

shadowAlpha: 0.07, // 设置阴影区域的透明度

renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.

rendererOptions: {} // options to pass to the renderer. Note, the default

// CanvasGridRenderer takes no additional options.

} ;

var myoptions = {

title:'Chart',

// Provide a custom seriesColors array to override the default colors.

seriesColors:['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],

seriesDefaults:{

renderer:jQuery.jqplot.BarRenderer,

rendererOptions: {

// Set varyBarColor to tru to use the custom colors on the bars.

varyBarColor: true

}

axesDefaults: {

tickRenderer: $.jqplot.CanvasAxisTickRenderer ,

tickOptions: {

angle: -30,

fontSize: '10pt'

}

axes:{

xaxis:{

renderer: jQuery.jqplot.CategoryAxisRenderer

}

grid:mygrid

};

jQuery.jqplot.config.enablePlugins = true;

jQuery.jqplot(containerid, [line1], myoptions);

};

function drawLineChart3(containerid){

var chartContainer = $("#"+containerid);

chartContainer.html("");

var mygrid= {

drawGridLines: true, // wether to draw lines across the grid or not.

gridLineColor: '#cccccc', // 设置整个图标区域网格背景线的颜色

background: 'rgba(0,0,0,0.0)', // 设置整个图表区域的背景色

borderColor: '#999999', // 设置图表的(最外侧)边框的颜色

borderWidth: 2.0, //设置图表的（最外侧）边框宽度

shadow: true, // 为整个图标（最外侧）边框设置阴影，以突出其立体效果

shadowAngle: 45, // 设置阴影区域的角度，从x轴顺时针方向旋转

shadowOffset:1.5, // 设置阴影区域偏移出图片边框的距离

shadowWidth: 3, // 设置阴影区域的宽度

shadowDepth: 3, // 设置影音区域重叠阴影的数量

shadowAlpha: 0.07, // 设置阴影区域的透明度

renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.

rendererOptions: {} // options to pass to the renderer. Note, the default

// CanvasGridRenderer takes no additional options.

} ;

var myoptions = {

// Give the plot a title.

title: 'Plot With Options',

axesDefaults: {

labelRenderer: $.jqplot.CanvasAxisLabelRenderer

seriesDefaults: {

rendererOptions: {smooth: true}

axes: {

// options for each axis are specified in seperate option objects.

xaxis: {label: "X Axis",pad: 0},

yaxis: {label: "Y Axis"}

},//end axes

grid:mygrid

}

var plot2 = $.jqplot (containerid, [[3,7,9,1,5,3,8,2,5]], myoptions);

}

JS Chart jqplot RGraph 对比相关推荐

MindFusion JS Chart 2.0 Crack
一个用于图表.仪表和仪表板的库.MindFusion JS Chart 结合了 2D 和 3D 图表.财务图表.仪表和仪表板.优雅的 API.丰富的事件集.无限数量和类型的数据系列以及您在JavaSc ...
MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...
基于casperjs、resemble.js实现一个像素对比服务
写在最前本次分享一个提供设计稿与前端页面进行像素对比的node服务,旨在为测试或者前端人员自己完成一个辅助性测试.相信我,在像素级别的对比下,网页对设计稿的还原程度一下子就会凸显出来. 欢迎关注我的 ...
如何在我们项目中利用开源的图表（js chart）
最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使用纯js 或者建立在一些插件 ...
js / java 文档对比
主要是一段段的来比较后端对比比较插件: io.github.java-diff-utils 显示插件diff2html: diff2html diff2html 是一个 Bash 脚本,利用管道机 ...
Node四种动态加载JS代码方法性能对比
背景我们运行node程序的时候,一般情况下,js代码都是事先写好在js文件里,然后启动的时候加载到内存中执行的.在一些特殊的需求下,我们可能会执行一些动态的js代码. 四种方法目前我能想到的方法有 ...
原生js和jQuery优缺点对比
原生js缺点: 1.不能添加多个入口函数(window.onload),如果添加了多个入口函数,则会将前面的覆盖. 2.原生js的API名字都太长,太难记例如:document.getEle ...
基于casperjs、resemble.js实现一个像素对比服务 1
写在最前本次分享一个提供设计稿与前端页面进行像素对比的node服务,旨在为测试或者前端人员自己完成一个辅助性测试.相信我,在像素级别的对比下,网页对设计稿的还原程度一下子就会凸显出来..如果哪位童鞋 ...
JS与JQ的对比与提高
来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

JS Chart jqplot RGraph 对比

JS Chart jqplot RGraph 对比相关推荐

最新文章

热门文章