highchart 的折线图的使用_综合

相关技术文档访问highchart官网，可以进行相关图的初始化参数设置
http://www.hcharts.cn/
下面是使用中的相关步骤：
摸索了一天，终于把图的数据进行显示出来，但是还不是很完美，不是事实的进行动态显示，只能通过刷新页面进行异步查询，在进行显示，
如果那位大神看到，请给本小白指点一下，谢谢各位大大。
1.首先从官网下载下js，highcharts.js.
2.下载下来直接在页面进行导入就可以了

<script type="text/javascript" charset="utf-8" src="${
    request.getContextPath()}/js/highcharts.js"></script>

3.创建一个 div 标签，设置一个 id 他的高度，宽度都是可以自由设置的，可以根据自己页面的情况进行设置

<div id="container" style="min-width:200px;height:280px"></div>

4.创建问div 标签后就可以初始化相关图的参数了，用到highchart 的基本上都是需要设置成自己的参数的，所以下面是相关的代码，
实在是看不懂的，也可以去相关百度，百度来还是都会用的，估计这篇文章也不会有人来看

<script type="text/javascript">
//相关的异步查询就吧初始化 highchart 的参数放到$.post 里边 就可以了，返回来的json 就是你显示的相关参数，

//这是我后台返回来json格式数据，

"{\"success3\": {\"succRate\": [92,27,55,22,41],\"trench3\": \"网关\",\"date\": [\"2017-09-2711: 50\",\"2017-09-2711: 55\",\"2017-09-2712: 00\",\"2017-09-2712: 05\",\"2017-09-2712: 10\"]},\"success2\": {\"succRate\": [2,44,12,51,91],\"trench2\": \"QQ钱包\",\"date\": [\"2017-09-2711: 50\",\"2017-09-2711: 55\",\"2017-09-2712: 00\",\"2017-09-2712: 05\"]},\"success1\": {\"trench1\": \"支付宝\",\"succRate\": [15,81,38,72,29],\"date\": [\"2017-09-2711: 50\",\"2017-09-2711: 55\",\"2017-09-2712: 00\",\"2017-09-2712: 05\"]},\"success0\": {\"succRate\": [34,72,16,26,54],\"trench0\": \"微信\",\"date\": [\"2017-09-2711: 50\",\"2017-09-2711: 55\",\"2017-09-2712: 00\",\"2017-09-2712: 05\"]}
}"

这里的显示数据必须是 数字类型，

之前返回的是字符串，不会进行显示

succRate\":[92,27,55,22,41]

$ . post ( 'querySucc', function (json ) {

//我这里的json是不可以直接使用的，需要转换成jquery对象才可以使用

var map = eval ( '(' +json + ')' ) ;

//这里就是highchart 的初始化参数

var chart = new Highcharts . Chart ( 'container', {
//title是本折线图的标题头
title : {
text : '各渠道成功率折线图', x : -20 } ,

xAxis : {//categories :这类是X轴的时间显示，是一个数组的格式，
categories : map .success3 .date ,
title : { text : '本图只显示20分钟之内交易量的成功率' }//text 这里是在本图下方的一个备注， } ,
yAxis : {
title : {
text : '成功率 %'//这里是设置本图左侧的说明 } ,
tickPositions : [ 0,20,40,60,80,100 ] ,//这里是设置本图的固定高度规格的显示，如果不设置的话，他会跟据你数据的变化而变化的
plotLines : [{
value : 0,
width : 1,
color : '#808080' }]
} ,
tooltip : {
valueSuffix : ' %'//这里是设置你鼠标指向数据时也面继续提示数据的后缀拼接 } ,
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'middle',
borderWidth : 0 } ,
plotOptions : {
line : {
dataLabels : {
enabled : true
// 开启数据标签 } ,
enableMouseTracking : true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
}
} ,、//这里是最重要的了，也就是你需要显示的数据，我这里是map套map套数组的形式，页面我进行json 的转化了，这里的name就是你的数据名称

//有多少组就写多少组，当然也可以循环创建，我这里还好就没有进行数据的遍历，data 跟name 是成对出现的，data是name 的数据了
//data 是一个数组的形式出现的，所以我的是map套map套数组的形式，页面转化的所以直接点就可以了，设置完这步也就算完事了，
//当ajax初始化完成的时候本折线图就会成显出来了，对本白来说，什么都算不上二把刀的真有的费劲了，如果还看不懂的话，直接百度吧，百度里
//的东西还是比较全的，所以加油吧。
series : [{

name : map .success3 .trench3 ,
data : map .success3 .succRate
} , {
name : map .success2 .trench2 ,
data : map .success2 .succRate
} , {
name : map .success1 .trench1 ,
data : map .success1 .succRate
} , {
name : map .success0 .trench0 ,
data : map .success0 .succRate
}]
}) ; } , JSON )

</script>

highchart 的折线图 的使用

highchart 的折线图的使用