当前位置: 代码迷 >> JavaScript >> JSChart 怎么画两条折线图
  详细解决方案

JSChart 怎么画两条折线图

热度:351   发布时间:2013-03-06 16:20:31.0
JSChart 如何画两条折线图
JSchart 为何只能显示一条折线图?

<script type="text/javascript">
var myData = new Array([1997, 7.80,8.90], [1998, 4.80,8.60], [1999, 6.50,4.80], [2000, 6.10,6.50], [2001, 4.40,4.40], [2002, 5.80,6.10], [2003, 4.00,6.10], [2004, 8.50,6.10], [2005, 8.90,6.10], [2006, 9.20,6.10]);
var myChart = new JSChart('graph', 'line');
myChart.setDataArray(myData);
myChart.setTitle('India GDP');
myChart.setTitleColor('#8E8E8E');
myChart.setTitleFontSize(11);
myChart.setAxisNameX('');
myChart.setAxisNameY('');
myChart.setAxisColor('#8420CA');
myChart.setAxisValuesColor('#949494');
myChart.setAxisPaddingLeft(100);
myChart.setAxisPaddingRight(120);
myChart.setAxisPaddingTop(50);
myChart.setAxisPaddingBottom(40);
myChart.setAxisValuesDecimals(3);
myChart.setAxisValuesNumberX(10);
myChart.setShowXValues(false);
myChart.setGridColor('#C5A2DE');
myChart.setLineColor('#BBBBBB');
myChart.setLineWidth(2);
myChart.setFlagColor('#9D12FD');
myChart.setFlagRadius(4);
myChart.setTooltip([1997, 'GDP 7.80']);
myChart.setTooltip([1998, 'GDP 4.80']);
myChart.setTooltip([1999, 'GDP 6.50']);
myChart.setTooltip([2000, 'GDP 6.10']);
myChart.setTooltip([2001, 'GDP 4.40']);
myChart.setTooltip([2002, 'GDP 5.80']);
myChart.setTooltip([2003, 'GDP 4.00']);
myChart.setTooltip([2004, 'GDP 8.50']);
myChart.setTooltip([2005, 'GDP 8.90']);
myChart.setTooltip([2006, 'GDP 9.20']);
myChart.setLabelX([1997, '1997']);
myChart.setLabelX([1998, '1998']);
myChart.setLabelX([1999, '1999']);
myChart.setLabelX([2000, '2000']);
myChart.setLabelX([2001, '2001']);
myChart.setLabelX([2002, '2002']);
myChart.setLabelX([2003, '2003']);
myChart.setLabelX([2004, '2004']);
myChart.setLabelX([2005, '2005']);
myChart.setLabelX([2006, '2006']);
myChart.setSize(616, 321);
myChart.draw();
</script>
JSchart?折线图

------解决方案--------------------
参照官方的例子即可
example-3

<html>
<head>

<title>JSChart</title>

<script type="text/javascript" src="../../../sources/jscharts.js"></script>

</head>
<body>

<div id="graph">Loading graph...</div>

<script type="text/javascript">
var myChart = new JSChart('graph', 'line');
myChart.setDataArray([[1, 80],[2, 40],[3, 60],[4, 65],[5, 50],[6, 50],[7, 60],[8, 80],[9, 150],[10, 100]], 'blue');
myChart.setDataArray([[1, 100],[2, 55],[3, 80],[4, 115],[5, 80],[6, 70],[7, 30],[8, 130],[9, 160],[10, 170]], 'green');
myChart.setDataArray([[1, 150],[2, 25],[3, 100],[4, 80],[5, 20],[6, 65],[7, 0],[8, 155],[9, 190],[10, 200]], 'gray');
myChart.setAxisPaddingBottom(40);
myChart.setTextPaddingBottom(10);
myChart.setAxisValuesNumberY(5);
myChart.setIntervalStartY(0);
myChart.setIntervalEndY(200);
myChart.setLabelX([2,'p1']);
myChart.setLabelX([4,'p2']);
myChart.setLabelX([6,'p3']);
myChart.setLabelX([8,'p4']);
myChart.setLabelX([10,'p5']);
myChart.setAxisValuesNumberX(5);