jscharts.js_charts.js资源-CSDN文库

5星 · 超过95%的资源需积分: 50 120 浏览量 2013-07-31 16:37:04 上传评论 2 收藏 196KB PDF 举报

### jscharts.js 相关知识点 #### 一、概述 `jscharts.js`是一款JavaScript类库，用于在客户端绘制图表，无需任何额外插件。它支持多种数据输入格式（如XML、JSON或JavaScript数组），使得用户可以轻松地将数据转换为图表。此库允许开发者绘制各种类型的图表，包括条形图、饼图和线图等，并且高度可定制。 #### 二、实现步骤 ##### 1. 引入脚本文件要使用`jscharts.js`，首先需要在HTML页面的头部引入该库提供的唯一JavaScript文件。这个文件包含了主要的代码逻辑以及兼容Internet Explorer的Canvas函数。 ```html <script type="text/javascript" src="jscharts.js"></script> ``` 这段代码展示了如何在页面的`<HEAD>`部分包含脚本文件。`jscharts.js`包含了绘制图表所需的主要库和易于使用的API，以及用于在图形上绘制文本的功能，以及Internet Explorer所需的Canvas函数。 ##### 2. 准备容器为了容纳图表，需要创建一个带有唯一ID的容器，通常是一个`<DIV>`元素。例如： ```html <div id="chartcontainer">如果没有JavaScript支持或者用于SEO目的，这里是替代文本</div> ``` 在这个例子中，`<div>`标签作为图表的容器。其内部的文本将在JavaScript不被支持或禁用时显示，同时也可以用于搜索引擎优化(SEO)。 ##### 3. 绘制第一个图表接下来，通过几行JavaScript代码来绘制第一个图表。首先准备图表数据，这些数据可以是一个简单的数组，其中每个子数组包含两个元素。每一个这样的两元素数组将代表线图中的一个点、条形图中的一根柱子或饼图中的一个扇区。以下是一个示例，展示了如何创建并绘制一个简单的线图： ```javascript <script type="text/javascript"> var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]); var myChart = new JSChart('chartcontainer', 'line'); // 构造函数初始化图表 myChart.setDataArray(myData); // 设置数据 myChart.draw(); // 绘制图表 </script> ``` - 第一行定义了一个名为`myData`的变量，其中存储了一组数据。 - 第二行使用构造函数`new JSChart()`初始化了一个新的`JSChart`对象，并提供了容器ID和图表类型。在这里，图表类型设置为`'line'`，表示绘制线图。 - 第三行通过调用`setDataArray()`方法向`JSChart`对象引入数据。 - 最后一行执行图表的实际绘制。 #### 三、图表类型与定制选项 `jscharts.js`支持多种图表类型，包括但不限于： - **线图**：适合展示随时间变化的趋势。 - **条形图**：适用于比较不同类别之间的数值。 - **饼图**：用于表示各个部分占总体的比例。此外，用户可以根据需求自定义图表的颜色、大小、样式等，使其更好地适应网站的设计风格。例如，可以通过修改图表配置文件中的设置来自定义图表的外观。 #### 四、总结 `jscharts.js`提供了一个简单而强大的解决方案，使得开发者能够轻松地在网页上绘制各种图表。无论是对于数据可视化的需求还是对于网站功能性的增强，`jscharts.js`都是一款值得尝试的工具。通过简单的API调用，用户可以轻松地创建出美观且具有交互性的图表，极大地提高了网站的用户体验。

资源推荐

资源详情

资源评论

JS Charts 3.0 User Guide

Introduction

JS Charts is a Javascript class used to draw charts using entirely client-side scripting. No additional plugins are

necessary. Just include our scripts, prepare your chart data in XML, JSON or Javascript Array, and your chart is ready.

JS Charts allows you to draw different types of charts, like bars, pie charts or simple lines, and it is highly customizable.

I. Implementation

1. Easy. We begin with the header of course.

There is only one Javascript file to be included, it contains the main code and canvas functions compatible with

Internet Explorer.

Fig. 1.1 - Example of how to include the script files into the <HEAD> section of your page

Jscharts.js contains the main library for the charts and code to easily “draw” text over the graphic chart and canvas

functions required by Internet Explorer (implemented natively in Firefox, Opera or Safari).

2. Container

The second step is to prepare the container which will hold one chart. This can be a simple <DIV> tag. It is mandatory

for this tag to have a unique ID set.

<div id="chartcontainer">This is just a replacement in case Javascript is not

available or used for SEO purposes</div>

Fig. 1.2 - Container example

The container's content will be replaced by JS Charts.

3. First chart

Next, a few lines Javascript code is needed for your first chart. First, the chart data are prepared, a simple array

contains other arrays, each of two elements. Each of these two-element arrays will represent one point in a line

graphic, or one bar in a bar chart, or a pie section in a pie chart.

These data are stored in the myData variable as in the following example:

var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);

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

myChart.setDataArray(myData);

myChart.draw();

</script>

Fig. 1.3 - A simple line chart

Second line is the constructor and initializes the chart by providing the container ID, the chart type (possible values are

line, bar and pie). The chart type here is overwritten by the settings found in the XML or JSON files if those are used.

Third line introduces the data to the JSChart object. And finally the fourth line executes the chart drawing.

var myData = new Array(['unit', 20], ['unit two', 10], ['unit three', 30],

['other unit', 10], ['last unit', 30]);

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

剩余27页未读，继续阅读

评论收藏

内容反馈

谜诺

2016-09-14

非常好用，不错~
yxp_18968142435

2015-09-02

不错还有例子只是不能使用中文又重新下了一个jscharts_mb.js
依旧986

2014-07-07

很好，很实用，非常感谢
北斗星空的笨小孩

2015-11-03

非常好用，不错~
bin2018

2016-07-04

不错，遗憾的时不支持中文

前往

页

davylost

粉丝: 0
资源: 1

jscharts.js

jscharts------实例文件

jscharts_mb.js

JsCharts.zip

echarts.js

jscharts支持中文字符显示

jscharts 统计图插件

jscharts 绘制图标工具包

JSCharts3_demo.zip_DEMO_jscharts_jscharts javascript_jschartsdem

jquery统计图表jscharts

jscharts破解版

jscharts 图标生成

jscharts包

无logo jscharts.zip

报表生成需要的jscharts包

echarts.js完整版文件

javascript

ExtJs charts.swf源码

JSCharts3无图标版

js charts含中文demo

JSChart图表控件

JS Charts 最新完整版

JSCharts v3.06 无水印

notepad++免费安装版本，免激活

六音音源pc端js文件，版本1.2.0

echarts 全国地图json数据

element-ui v2.15.13离线文档.rar

axure谷歌浏览器插件

最新资源