<html>
<head>
<title>Highcharts Example</title>
<script type="text/javascript"src="/js/jquery-1.71.min.js"></script>
<script type="text/javascript"src="/js/Calendar3.js"></script>
</head>
<body>
<scripttype="text/javascript">
var ShowAjaxDate = {
init: function(begin, end) {
this.begin = begin;
this.end = end;
this.getNewBuy();
},
getNewBuy: function() {
var _this = this;
var param = {
begin: this.begin,
end: _this.end,
callback:'ShowAjaxDate.setAjaxDate'
};
$.ajax({
url: '/manage/newcustomflowquery.jsonp',
data: param,
dataType: 'script',
success: function(r) {
}
});
},
setAjaxDate: function(r) {
var allVisits = [];
var showitem1="下单量";
var pvVisitors = [];
var showitem2="pv";
var uvVisitors = [];
var showitem3="uv";
var datetime = [];
for(i=0;i< r.listCustomFlowQuery.length;i++)
{
allVisits.push(r.listCustomFlowQuery[i].onlProNum);
pvVisitors.push(r.listCustomFlowQuery[i].pv);
uvVisitors.push(r.listCustomFlowQuery[i].uv);
datetime.push(r.listCustomFlowQuery[i].dateTime);
}
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly AverageTemperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
credits: {
enabled: false
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '次数'
}
},
legend: {
align: 'left',
verticalAlign: 'top',
x: 60,
y: 10,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(){
hs.htmlExpand(null, {
pageOrigin: {
x:this.pageX,
y:this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x)+':<br/> '+
this.y +' visits',
width:200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
}, {
},{
}]
};
options.xAxis.categories=datetime;
options.series[0].name = showitem1;
options.series[1].name = showitem2;
options.series[2].name = showitem3;
options.series[0].data = allVisits;
options.series[1].data = pvVisitors;
options.series[2].data = uvVisitors;
var chart = new Highcharts.Chart(options);
}
};
</script>
<div style="text-align:center;margin: 0 auto">
<span>选择查询日期：</span> <span>从
<inputname="control_date" type="text" id="control_date"size="10"
maxlength="10" onclick="new Calendar().show(this);"readonly="readonly" />
</span>
<span>至
<inputname="control_date2" type="text"id="control_date2" size="10"
maxlength="10" onclick="new Calendar().show(this);"readonly="readonly"/>
</span>
<input type="button" name="button"id="button" value="查询"onclick="getUrlShowData();" />
<script>
function getUrlShowData()
{
var begin = document.getElementById("control_date").value;
var end = document.getElementById("control_date2").value;
ShowAjaxDate.init(begin,end);
}
</script>
</div>
<script src="/js/highcharts.js"></script>
<scriptsrc="/js/modules/exporting.js"></script>
<div id="container"style="min-width: 400px; height: 400px; margin: 0auto"></div>
</body>
</html>
欢迎大家指正。
相关推荐
- **JSON格式返回**：为了与Highcharts通信，我们需要将这些数据转换为JSON格式。Struts2提供了一种内置的JSON结果类型，使得返回JSON数据变得简单。 - **JSP页面渲染图表**：在JSP页面中，我们可以使用JavaScript...
4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。 5.放大功能：HighCharts可以大量数据集中显示，并且...
以下是对`highcharts使用说明及demo`的详细解读： 1. **基本配置**：在使用Highcharts时，首先需要在HTML文件中引入Highcharts的JavaScript库。通常，这可以通过在`<head>`标签内添加链接到Highcharts CDN的`...
总结起来，"Highcharts json demo"项目展示了如何利用Highcharts与JSON数据结合，实现异步请求和数据可视化。这个过程涉及到前端的AJAX请求、JSON数据解析以及Highcharts的配置与渲染。掌握这些技术，不仅有助于提升...
本文将深入探讨如何使用Highcharts高效地生成百万数据点的折线图。 首先，理解数据分块加载的概念是关键。对于大数据量，一次性加载所有数据会消耗大量内存并导致浏览器性能下降。因此，Highcharts支持分批加载数据...
这个压缩包"highcharts 中文API及DEMO"可能包含了Highcharts的中文版API文档和一些示例代码，对于学习和使用Highcharts的中文用户来说是非常有价值的资源。 首先，Highcharts的API文档是理解其功能和用法的关键。在...
HighCharts导出图片是发现请求的是官网，于是找了一下，整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...
例如，可以使用`highcharts-export-server`，这是一个Node.js服务，它可以解析SVG并将其转换为多种格式，如JPEG、PNG和PDF。 3. **.NET集成**： 在.NET环境中，我们可以创建一个API接口，调用`highcharts-export-...
通过研究这些资源，你将能够熟练掌握HighCharts的使用，创建出美观且功能丰富的数据可视化图表。无论你是数据分析师、前端开发者还是报告设计师，HighCharts都能成为你强大的工具，帮助你有效地传达数据故事。在实践...
总的来说，"highcharts demo"项目是一个学习和实践Highcharts如何处理时间序列数据的好例子，对于理解Highcharts的使用方法和实现动态数据可视化有着重要的参考价值。通过深入研究这个示例，开发者可以进一步掌握...
在使用HighCharts时，可能会遇到无法正确传入数据的问题，这通常与数据格式、JavaScript语法错误或者HighCharts配置有关。本篇文章将深入探讨这些问题及其解决方案。 首先，HighCharts的数据可以来源于多个来源，如...
在这个"highcharts简单的饼图demo"中，我们将深入探讨如何利用Highcharts来构建一个基本的饼图，并根据需求进行自定义。 饼图是一种常用的统计图表，它通过将整个圆代表100%，而每个扇区则表示数据集中的一部分。在...
总之，"AspNet的Highcharts中文翻译Demo"是一个非常有价值的资源，它为ASP.NET开发者提供了一个便捷的途径来学习和使用Highcharts，让数据可视化变得简单而高效。通过学习和实践这个Demo，开发者不仅可以提升自己的...
highcharts小demo
当X轴数据是时间戳时，我们需要设置`xAxis.type`为`datetime`，并使用Highcharts支持的时间格式。例如： ```javascript xAxis: { type: 'datetime', labels: { dateTimeLabelFormats: { second: '%H:%M:%S', ...
在"Highcharts-6.0.2-demo.zip"这个压缩包中，用户可以找到Highcharts 6.0.2版本的示例代码和相关资源，用于学习和理解如何使用这个图表插件。"Highcharts-6.0.2-demo"这个文件夹很可能包含以下内容： 1. **...
在这个"Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子"中，我们将探讨如何结合Java后端和JSON数据格式，通过AJAX技术在网页上展示动态曲线报表。 首先，`index_lineAjax.htm`是前端HTML文件，它包含了...
这个Demo可能还涉及到了如何将表格数据转换为Highcharts所需的格式，或者如何动态更新图表。学习和理解这个Demo有助于掌握Highcharts的使用，从而能够灵活地在网页中创建各种交互式图表，提升数据可视化的专业能力。...
"unigui_highcharts_Demo" 是一个基于Unigui框架和Highcharts库的应用程序示例。Unigui是一款用于创建跨平台Web应用的开发工具，它基于Delphi语言，提供了一种简单的方式来构建响应式、多设备兼容的Web应用程序。而...