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.效果图:
Highcharts折线图_结合ajax实现局部刷新的更多相关文章
-
Ajax 异步局部刷新
Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...
-
jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...
-
highcharts折线图的简单使用
第一步:官网下载压缩包https://www.hcharts.cn/download 第二步:HTML中引入highcharts.js <!DOCTYPE html> <html&g ...
-
asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
-
C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
-
jQuery+ajax实现局部刷新
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...
-
Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
-
[转载].NET ASP.NET 中web窗体(.aspx)利用ajax实现局部刷新
之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...
-
highcharts 折线图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
随机推荐
-
Windows版的各种Python库安装包下载地址与安装过程
在用Python开发时(Windows环境),会碰到需要安装某个版本的第三方库,为了以后查找.安装方便,总结如下: windows版的各种Python库安装包下载地址:http://www.lfd.u ...
-
使用inherit属性值继承其父元素样式来覆盖UA自带样式。
像button.input这样的表单控件,不同的浏览器都会有自己的样式风格(UA样式).我们可以使用inherit继承其父元素样式,从而覆盖浏览器的UA样式. button, input, selec ...
-
java基础学习之对象转型
对象转型(casting): 1)一个基类的引用类型变量可以指向其子类的对象 2)一个基类的引用不可以访问其子类对象新增加的成员(属性和方法) 3)可以使用引用变量instanceof类名,来判断该引 ...
-
UVa 1471 (LIS变形) Defense Lines
题意: 给出一个序列,删掉它的一个连续子序列(该子序列可以为空),使得剩下的序列有最长的连续严格递增子序列. 分析: 这个可以看作lrj的<训练指南>P62中讲到的LIS的O(nlogn) ...
-
分布式数据库中间件TDDL、Amoeba、Cobar、MyCAT架构比较分
比较了业界流行的MySQL分布式数据库中间件,关于每个产品的介绍,网上的资料比较多,本文只是对几款产品的架构进行比较,从中可以看出中间件发展和演进路线 框架比较 TDDL Amoeba Cobar M ...
-
css-3列布局
三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'margin'属性.并且'中间'部分不用设置'width'.例如: <!DOCTYPE html PUBLIC " ...
-
CSS之box-sizing的用处简介
前几天才发现有 box-sizing 这么个样式属性.研究了一番感觉非常有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 比如:当一个容器宽度定义为 width:100%; 之后.假设再添加 ...
-
GET_DDL提取目标元数据:ddl
创建对象的语句就是了 提取表 set line 200 pages 50000 wrap on long 999999 serveroutput on SQL> select dbms_meta ...
-
20154305 齐帅 PC平台逆向破解
Exp1 PC平台逆向破解 一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时 ...
-
Linux内核总结博客 20135332武西垚
http://www.cnblogs.com/wuxiyao/p/5220677.htmlhttp://www.cnblogs.com/wuxiyao/p/5247571.htmlhttp://www ...