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 折线图

解决方案 »

  1.   

    参照官方的例子即可
    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);
    myChart.setShowXValues(false);
    myChart.setTitleColor('#454545');
    myChart.setAxisValuesColor('#454545');
    myChart.setLineColor('#A4D314', 'green');
    myChart.setLineColor('#BBBBBB', 'gray');
    myChart.setTooltip([1]);
    myChart.setTooltip([2]);
    myChart.setTooltip([3]);
    myChart.setTooltip([4]);
    myChart.setTooltip([5]);
    myChart.setTooltip([6]);
    myChart.setTooltip([7]);
    myChart.setTooltip([8]);
    myChart.setTooltip([9]);
    myChart.setTooltip([10]);
    myChart.setFlagColor('#9D16FC');
    myChart.setFlagRadius(4);
    myChart.setBackgroundImage('chart_bg.jpg');
    myChart.setSize(616, 321);
    myChart.draw();
    </script></body>
    </html>