JS 实现画饼图，柱图，曲线图

JS Charts 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 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.

Implementation

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

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. 2 - Container example

The container's content will

be replaced by JS Charts.

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

<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>

Fig. 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).

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

myChart.setDataArray(myData);

myChart.draw();

</script>

Fig. 4 - Bar type chart; observe the data array format

<script type="text/javascript">

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

myChart.setDataXML('data.xml');

myChart.draw();

</script>

</dataset>

</JSChart>

Fig. 6 – XML file example

The main node must be named JSChart. The child nodes can be dataset, colorset and optionset. In

the above example only the dataset is used, since it is the only mandatory child node. The

<script type="text/javascript">

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

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

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

myChart.setDataArray(myData);

</script>

Fig. 7 – Line chart with two series of data

The setDataArray method must be called for every line in the chart. Optionally, a second

argument can be passed to the setDataArray method representing the name or id of the data set

(this can be useful in customizing the chart – more about it in the Customization chapter).

</dataset>

<dataset type="line">

JS Charts is a highly customizable Javascript library. There are several API functions for you to

customize your charts. There are two ways to customize the charts: using the built-in Javascript

functions or using the optionset node in the XML file.

1. Using the built-in functions

A few examples of how to customize a chart:

<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.setBackgroundColor('#efe');

Fig. 9 – Customized chart

All public functions are described in the Reference chapter.

When using multiple data series in a line chart, you might want different settings for each line

(e.g. different colors). This will require associating the data set with the customization method

using an id. The setDataArray can be called using a second argument which will be the data set

id. The same id must be used when calling setLineColor, setLineWidth or setLineOpacity to set a

property for the specific data set. In the following example the first line id is used to colorize the

first data set and the second line id is used to set the width of the line for the second data set.

Also a tooltip is defined for the line with the first line id (you can read more about the tooltips in

Reference).

myChart.setDataArray(myData2,

myChart.setBackgroundColor('#efe');

myChart.setAxisNameX('Custom X Axis Name');

myChart.setAxisNameY('Y Axis');

myChart.setLineColor('#ff0f0f', 'first line');

myChart.setLineWidth(5, 'second line');

myChart.setSize(500, 400);

myChart.setTitle('My Chart Title');

myChart.setTitleColor('#5555AA');

<dataset type="line">