Highcharts折线图_结合ajax实现局部刷新
2024-09-01 05:52:09
1.首先，在https://www.hcharts.cn/下载Highcharts的组件。
2.然后，引用
<script src="../code/highcharts.js"></script>
3.html:
<div id="container" style="width: 550px; height: 400px;">
</div>
4.js
function getselect(Number_cp) {
Number_cp = $(".Number_cp").val();
$.ajax({
url: "../Ajax/DataStatistics.ashx?action=select",
type: "POST",
dataType: "text",
data: {
Number_cp: Number_cp
},
success: function (data) {
var s = data;
var model = eval(s);
a = "";
for (var i = 0; i < model.length; i++) {
var m = model[i].Quantity;
a += m + ",";
}
series_data = "";
series_data = a.substring(0, a.length - 1);
getQuantity(series_data);
}
})
}
function getQuantity(series_data) {
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
credits: {
enabled: false //不显示LOGO
},
title: {
text: '产品数量/每月'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 60
},
xAxis: {
softMin: 1,
title: {
text: '月份'
},
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
softMax: 4000,
tickAmount: 9,
title: {
text: '产品数量'
},
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: '产品数量',
data: eval("[" + series_data + "]")
}],
});
}
5.效果图：
最新文章
- win2008server系统下文件替换权限
- STL——临时对象的产生与运用
- 非常不错的android应用开发详解在安卓开发中
- 安装Eclipse(android)新建项目时遇到的问题
- GPIO控制LED
- CentOS 7 最小安装网络配置
- Unable to start web server; nested exception is org.springframework.context.ApplicationContextException: Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.
- linux下查看进程id时用到的命令
- 宝塔MySQL服务自动停止重启的解决方法
- centos7安装git踩坑记
- docker push 出现：x509: certificate signed by unknown authority
- Linux 文件查找（find）
- (五)ROS节点
- 杭电1133 排队买票 catalan
- 不使用第三方软件、使用IE11自带功能来屏蔽浏览器广告
- SAP全球企业官孙小群的生活智慧
- Android MediaPlayer 操作
- cin和cout详解
- jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）
- 关于IIS上Yii2的Url路由美化