highcharts绘制折线图

最新推荐文章于 2022-04-08 09:24:47 发布

原创最新推荐文章于 2022-04-08 09:24:47 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

highcharts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Highcharts库绘制相对横向折线图的方法。通过Ajax获取JSON格式的数据，利用JavaScript实现了最大值、平均值及最小值的折线图绘制，并详细展示了图表配置参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
* 绘制分析图表，取数据
*
*/
function drawRzhAnalysisBIG() {
$.ajax({
url : baseUrl + "/TOverhualtaskController?method=badAnalysis",
dataType : "json",
data : getQueryParameter(),
success : function(json) {
drawRzhBIG(json);
}
});
}

/**
* 绘制图表
*
* @param {}
* json
*/
function drawRzhBIG(json) {
$('#BIGDraw').highcharts({
credits : {
enabled : false
// 去掉highcharts网站url
},
chart : {
type : 'line',
marginRight : 0,
marginBottom : 25
},
title : {
text : '相对横向折线图',
align:'left',
x : 100
},
subtitle : {
text : '',
x : 0
},
xAxis : {
categories : json.xDate,
labels: {
rotation: 15
}
},
yAxis : {
title : {
text : '相对横向(%)'
},
plotLines : [{
value : 0,
width : 1,
color : '#808080'
}]
},
tooltip : {
valueSuffix : '%'
},
legend : {
layout : 'horizontal',
align : 'right',
verticalAlign : 'top',
x : 5,
y : 5,
borderWidth : 0
},
series : [{
name : '最大值',
data : json.rzhMax
}, {
name : '平均值',
data : json.rzhAvg
}, {
name : '最小值',
data : json.rzhMin
}]
});

}

rzhMax rzhAvg rzhMin 这三个是后来取来的list