HighCharts 曲线图示例
2018-06-11 本文已影响0人
离别刀
引入js文件：
<script src="/static/jquery-1.8.3.min.js"></script>
<script src="/static/highcharts.js"></script>
html代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<script src="/static/jquery-1.8.3.min.js"></script>
<script src="/static/highcharts.js"></script>
</head>
<body>
<div style="width: 50%" id="demo"/>
</body>
<script type="text/javascript">
var res= {
keys:["第1题", "第2题", "第3题", "第4题", "第5题", "第6题", "第7题", "第8题", "第9题", "第10题", "第11题", "第12题", "第13题", "第14题","第15题", "第16题", "第17题", "第18题", "第19题", "第20题"],
values:[100, 100, 50, 33, 67, 100, 100, 100, 100, 100, 100, 50, 100, 50, 100, 50, 100, 100, 100, 100]
};
var series = [{
name: '题目正确率',
marker: {
symbol: 'square'
},
data: res.values
}];
$("#demo").highcharts({
chart:{
type: 'spline',
},
title:{
text:'题目正确率统计'
},
xAxis:{
categories:res.keys,
labels:{
format: '{value}'
}
},
yAxis:{
title:{
text: '正确率%'
},
labels:{
format: '{value}'
}
},
tooltip:{
crosshairs:true,
shared:true
},
series: series
})
</script>
</html>
运行结果：
11173347.png
