在web开发中，经常会遇到需要作图展示的地方，常用的技术是jfreechart，她在服务器端生成图象，在前台展示，对于访问量巨大的网站，必然会加重服务器的负担，于是客户端绘图呼之欲出，典型的技术就是使用js。
客户端使用js绘图主要用到一个开源的js组件wz_jsgraphics.js ，网上有人使用这个js封装了一些画线，饼图的js，我们就可以使用这些js在客户端作图了。
写一个test.html （还要用到pie.js，bar.js，line.js）
<html >
<head>
<title> TEST </title>
<script type ="text/javascript" src ="wz_jsgraphics.js"></script>
<script type ="text/javascript" src ="pie.js"></script>
<script type ="text/javascript" src ="bar.js"></script>
<script type ="text/javascript" src ="line.js"></script>
</head>
<body >
<p>1.饼图</p>
<div id ="PieDiv" style ="position:relative;height:200px;width:300px;"></div>
<script language ="javascript">
var y = new Array ();
y[0] = 20000 ;
y[1] = 20000 ;
y[2] = 20000 ;
var x = new Array ();
x[0] = " a " ;
x[1] = " b " ;
x[2] = " c " ;
var mypie =new Pie( "PieDiv" );
mypie.drawPie(y,x);
// mypie.clearPie();
</script>
<p>2.柱图</p>
<div id="BarDiv" style="position:relative;height:200px;width:500px;"></div>
<script language="javascript">
var y= new Array ();
y[0] = 11112;
y[1] = 16000;
y[2] = 20000;
var x = new Array ();
x[0] = "a";
x[1] = "b";
x[2] = "c";
var mybar = new Bar("BarDiv");
mybar.drawBar(y,x);
</script>
<p> 3.线图 </p>
<div id ="LineDiv" style ="position:relative;height:200px;width:300px;"></div>
<script language ="javascript">
var y = new Array ();
y[0] = 16000 ;
y[1] = 26000 ;
y[2] = 36000 ;
y[3] = 46000 ;
y[4] = 36000 ;
y[5] = 26000 ;
var x = new Array ();
x[0] = "12:01" ;
x[1] = "12:02" ;
x[2] = "12:03" ;
x[3] = "12:04" ;
x[4] = "12:05" ;
x[5] = "12:06" ;
var myline = new Line("LineDiv");
myline.drawXYLine(y,x);
// myline.clearLine();
</script>
</body>
</html>
效果：
分享到：
相关推荐
JavaScript图表库，如"js chart js柱状图"，是一种用于在网页上创建交互式图形的工具，尤其适合展示数据。这些库通过JavaScript语言与HTML5的Canvas或SVG元素结合，能够动态地生成各种类型的图表，包括柱状图。柱状...
JS Chart是一个灵活且功能丰富的JavaScript库，它允许开发者通过配置各种属性来定制自己的图表样式和行为。 1. **柱形图（Bar Chart）**： - **定义**：柱形图是一种以矩形的长度表示数据大小的统计图表，通常用于...
**ChartJS 13.1.5：JavaScript图表库** ChartJS是一款轻量级的JavaScript图表库，专为快速创建美观的数据可视化而设计。在"ChartJS-13.1.5.zip"这个压缩包中，包含的是ChartJS的13.1.5版本，它支持多种图表类型，如...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...chart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js org...
Chart.js是一款轻量级的JavaScript图表库，专为网页数据可视化设计，尤其适合快速构建简单而美观的交互式图表。它支持多种图表类型，包括折线图、柱状图、饼图、雷达图、极坐标图等，能满足大部分基本的数据展示需求...
版本：2.5.0
Chart.js是一个轻量级的JavaScript库，专门用于创建各种类型的图表，如柱状图、折线图、饼图等。这个“用于创建矩阵图表的Chart.js模块_JavaScript_TypeScript_.zip”压缩包可能包含了一个扩展，使得Chart.js能够...
Chart.js 是一个轻量级的 JavaScript 图表库，它支持多种类型的图表，如线图、柱状图、饼图等。它的设计目标是保持简洁，易于上手，同时提供高质量的图表。 `laravel-chartjs` 包将 Chart.js 的优点与 Laravel 的...
Chart.js是一个轻量级且强大的JavaScript库，用于创建各种图表，如折线图、柱状图、饼图等。而`chartjs-plugin-annotation`是Chart.js的一个插件，它提供了在图表上添加注释的功能，比如绘制直线、虚线、箭头、文本...
Vue.js和Chart.js是两个非常流行的JavaScript库，分别在前端开发和数据可视化领域有广泛的应用。Vue.js是一款轻量级的渐进式框架，而Chart.js则是一个简单易用的图表库，适合创建各种类型的图表，如柱状图、折线图、...
2. **数据传递**：将Qt应用中的数据通过JavaScript接口传递到`Chart.js`，可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许C++和JavaScript之间安全、高效地交换数据。 3. **绘制图表**：...
基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制...
Chart.js是一款轻量级的JavaScript库，专门用于在Web上绘制各种统计图表，如饼图、柱状图和线图。它以其简单易用、高效和灵活性而受到开发者喜爱。这个压缩包“Chart.js-master”很可能是Chart.js的源码仓库，包含...
《jQuery OrgChart.js：构建灵活组织结构图的利器》 OrgChart.js 是一款基于 jQuery 的高效、可定制化的组织结构图插件。它允许开发者轻松地在网页上展示层次分明的组织架构，如公司部门、团队成员关系或者任何具有...
chart.js是一款轻量级的JavaScript图表库，适合用于数据可视化。它可以轻松创建各种类型的图表，如柱状图、饼图、线图等。在本项目中，chart.js被用来展示用户性别比例和年龄分布的统计信息。通过JSON数据接口获取...
总之，Chart.js是JavaScript世界里一款强大的图形库，无论是在网页应用还是移动应用中，都能轻松实现数据可视化，为开发者提供了一个高效、灵活的工具来呈现复杂的数据。通过深入理解和熟练运用，我们可以构建出美观...
chartjs-chart-financial, 金融证券的Chart.js 模块 Chart.js-财务图表用于烛台和OHLC图表的Chart.js MODULE使用和路线图这个 MODULE 还没有初始版本，在npm上还不可用。Chart.js 2.7.0添加了我们的timeseries扩展...
chartjs-gauge 简单量规图 样品 安装 纱线安装： yarn add chart.js chartjs-gauge npm install： npm install --save chart.js chartjs-gauge 配置选项 量规表基于“ 类型。 它定义了以下其他配置选项。 这些选项...