JS Chart jqplot RGraph 对比

时间  2019-12-04 标签 chart jqplot rgraph 对比

操做系统： android 2.3css

程序框架： phonegap + jquery mobilehtml

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

JS Chartandroid

RGraph canvas

jqplot框架

依赖js库ide

无ui

无spa

Jquery 操作系统

优势

使用简单，文档丰富，功能强大，美观，有动态效果

使用较简单，文档通常，有动态效果

使用较简单，文档较全

缺点

饼图无动态生成效果，我的版有水印

低端设备运行动态效果不流畅

无动态生成效果

是否免费

我的免费

是

是

chart.html 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

    <!--自适应界面,若是出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->

    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />

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

   -->

<link type="text/css" href="css/index.css" rel="stylesheet" />

<script src="js/jquery.js"></script>

<script src="js/jquery.mobile-1.0.1.min.js"></script>

<script src="js/twmdf-core.js"></script>

<script src="js/jscharts.js"></script>

 

  <script src="js/RGraph.bar.js"></script>

  <script src="js/RGraph.pie.js"></script>

  <script src="js/RGraph.line.js"></script>

  <script src="js/RGraph.common.core.js"></script>

  <script src="js/RGraph.common.effects.js"></script>

  <script src="js/RGraph.common.context.js"></script>

   

  <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" /> 

<script charset="utf-8"  src="js/jquery.jqplot.min.js"></script>

<script   charset="utf-8" src="js/jqplot.pieRenderer.min.js"></script>

<script   charset="utf-8" src="js/jqplot.barRenderer.min.js"></script>

<script   charset="utf-8" src="js/jqplot.categoryAxisRenderer.min.js"></script>

<script   charset="utf-8" src="js/jqplot.canvasAxisTickRenderer.min.js"></script>

<script   charset="utf-8" src="js/jqplot.canvasTextRenderer.min.js"></script>

<script src="js/chart.js"></script>

</head>

<body  >

<div data-role="page" id="chart"  >

<div data-role="header" data-position="fixed" data-theme="b" >

  <h1>chart</h1> 

</div>

   

<div data-role="content" id="chartContent" >

<div id='chartcontainer' class='chartcontainer'>

图表

</div>

<div class='ui-grid-b'>

<div class='ui-block-a'>

<a  data-role='button' data-theme='b' onclick='drawPieChart("chartcontainer")'>饼图</a>

</div>

<div class='ui-block-b'>

<a  data-role='button' data-theme='b' onclick='drawBarChart("chartcontainer")'>柱状图</a>

</div>

<div class='ui-block-c'>

<a  data-role='button' data-theme='b' onclick='drawLineChart("chartcontainer")'>线性图</a>

</div>

</div>

<div class='ui-grid-b'>

<div class='ui-block-a'>

<a  data-role='button' data-theme='b' onclick='drawPieChart2("chartcontainer")'>饼图</a>

</div>

<div class='ui-block-b'>

<a  data-role='button' data-theme='b' onclick='drawBarChart2("chartcontainer")'>柱状图</a>

</div>

<div class='ui-block-c'>

<a  data-role='button' data-theme='b' onclick='drawLineChart2("chartcontainer")'>线性图</a>

</div>

</div>

<div class='ui-grid-b'>

<div class='ui-block-a'>

<a  data-role='button' data-theme='b' onclick='drawPieChart3("chartcontainer")'>饼图</a>

</div>

<div class='ui-block-b'>

<a  data-role='button' data-theme='b' onclick='drawBarChart3("chartcontainer")'>柱状图</a>

</div>

<div class='ui-block-c'>

<a  data-role='button' data-theme='b' onclick='drawLineChart3("chartcontainer")'>线性图</a>

</div>

</div>

</div>

<div data-role="footer" data-fullscreen="false" data-position="fixed" data-id="toolbar">

        

        </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); 

}

联系我们 沪ICP备13005482号-10