JavaScriptベースのチャート生成スクリプト「JS Charts」[js]

JavaScriptベースのチャート生成スクリプト「JS Charts」の紹介です。

棒グラフ、折れ線グラフ、縁グラフとバリエーションはあります。

サンプルはこちらから

使用方法は、このライブラリをサイトに読みこんで、XML形式のデータを用意するだけです。もしくは、var myData = new Array([''])の数値を変えるだけです。

棒グラフ

bar0902101.jpg

JavaScriptのみ

var myData = new Array(['2005', 2], ['2006', 1], ['2007', 3], ['2008', 6]);
var myChart = new JSChart('chartid', 'bar');
myChart.setDataArray(myData);
myChart.setBarColor('#42aBdB');
myChart.setBarOpacity(0.8);
myChart.setBarBorderColor('#D9EDF7');
myChart.setBarValues(false);
myChart.setTitleColor('#8C8383');
myChart.setAxisColor('#777E81');
myChart.setAxisValuesColor('#777E81');
myChart.draw();

XMLを使う場合

var myChart = new JSChart('chartid', 'bar');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="bar">
		<data unit="2005" value="2"/>
		<data unit="2006" value="1"/>
		<data unit="2007" value="3"/>
		<data unit="2008" value="6"/>
	</dataset>
	<optionset>
		<option set="setBarColor" value="'#42aBdB'"/>
		<option set="setBarOpacity" value="0.8"/>
		<option set="setBarBorderColor" value="'#D9EDF7'"/>
		<option set="setBarValues" value="false"/>
		<option set="setTitleColor" value="'#8C8383'"/>
		<option set="setAxisColor" value="'#777E81'"/>
		<option set="setAxisValuesColor" value="'#777E81'"/>
	</optionset>
</JSChart>

折れ線グラフ

bar0902102.jpg

JavaScriptのみ

var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChart = new JSChart('chartid', 'line');
myChart.setDataArray(myData);
myChart.setLineColor('#8D9386');
myChart.setLineWidth(4);
myChart.setTitleColor('#7D7D7D');
myChart.setAxisColor('#9F0505');
myChart.setGridColor('#a4a4a4');
myChart.setAxisValuesColor('#333639');
myChart.setAxisNameColor('#333639');
myChart.setTextPaddingLeft(0);
myChart.draw();

XMLを使う場合

var myChart = new JSChart('chartid', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="line">
		<data unit="10" value="2"/>
		<data unit="15" value="0"/>
		<data unit="18" value="3"/>
		<data unit="19" value="6"/>
		<data unit="20" value="8.5"/>
		<data unit="25" value="10"/>
		<data unit="30" value="9"/>
		<data unit="35" value="8"/>
		<data unit="40" value="5"/>
		<data unit="45" value="6"/>
		<data unit="50" value="2.5"/>
	</dataset>
	<optionset>
		<option set="setLineColor" value="'#8D9386'"/>
		<option set="setLineWidth" value="4"/>
		<option set="setTitleColor" value="'#7D7D7D'"/>
		<option set="setAxisColor" value="'#9F0505'"/>
		<option set="setGridColor" value="'#a4a4a4'"/>
		<option set="setAxisValuesColor" value="'#333639'"/>
		<option set="setAxisNameColor" value="'#333639'"/>
		<option set="setTextPaddingLeft" value="0"/>
	</optionset>
</JSChart>

円グラフ

bar0902103.jpg

JavaScriptのみ

var myData = new Array(['Sector 1', 2], ['Sector 2', 1], ['Sector 3', 3], ['Sector 4', 6], ['Sector 5', 8.5], ['Sector 6', 10]);
var colors = ['#FACC00', '#FB9900', '#FB6600', '#FB4800', '#CB0A0A', '#F8F933'];
var myChart = new JSChart('chartid', 'pie');
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setTitleColor('#857D7D');
myChart.setPieUnitsColor('#9B9B9B');
myChart.setPieValuesColor('#6A0000');
myChart.draw();

XMLを使う場合

var myChart = new JSChart('chartid', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="pie">
		<data unit="Sector 1" value="2"/>
		<data unit="Sector 2" value="1"/>
		<data unit="Sector 3" value="3"/>
		<data unit="Sector 4" value="6"/>
		<data unit="Sector 5" value="8.5"/>
		<data unit="Sector 6" value="10"/>
	</dataset>
	<colorset>
		<color value="#FACC00"/>
		<color value="#FB9900"/>
		<color value="#FB6600"/>
		<color value="#FB4800"/>
		<color value="#CB0A0A"/>
		<color value="#F8F933"/>
	</colorset>
	<optionset>
		<option set="setTitleColor" value="'#857D7D'"/>
		<option set="setPieUnitsColor" value="'#9B9B9B'"/>
		<option set="setPieValuesColor" value="'#6A0000'"/>
	</optionset>
</JSChart>