amcharts画折线图如何实现多条折线显示

光屁屁打酱油 2015-08-20 09:57:11
script type="text/javascript" src="amcharts.js">
</script>
<script type="text/javascript">
AmCharts.ready(function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "key";
chart.angle = 30;
chart.depth3D = 20;
var graph = new AmCharts.AmGraph();
chart.addGraph(graph);
graph.valueField = "value";
graph.fillAlphas = 0.3;
graph.type = "line";
graph.bullet = "round";
graph.lineColor = "#8e3e1f";
graph.balloonText = "[[key]]: [[value]]";
var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = chartData.length;
categoryAxis.gridPosition = "start";
chart.write("chart");
});

var val=document.getElementById('table1')
var chartData=new Array();
for(var j=0; j<val.rows.length;j++)
{

chartData[j]={"key": "",
"value": val.rows[j].cells[0].innerHTML};
}

var chartData= [{

"key": "HTML5",

"value": 50

}, {

"key": "CSS3",

"value": 60

}, {

"key": "Js",

"value": 80

}, {

"key": "Jq",

"value": 66

}, {

"key": "PHP",

"value": 110

}, {

"key": "ASP",

"value": 120

}, {

"key": "ASP.net",

"value": 100

}, {

"key": "JSP",

"value": 90

}, {

"key": "C#",

"value": 80

}, {

"key": "Java",

"value": 130

}, {

"key": "Obj-C",

"value": 75

}, {

"key": "C++",

"value": 120

}, {

"key": "C",

"value": 125

}];

</script>
...全文
295 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
有几个线就new几个 AmCharts.AmGraph()

87,955

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧