HTML 页面
首先要引入以下的几个JS文件
http://sandbox.runjs.cn/js/sandbox/xCharts/xcharts.min.css" http://sandbox.runjs.cn/js/sandbox/other/d3.v2.min.js
"http://sandbox.runjs.cn/js/sandbox/xCharts/xcharts.min.js
这是几个下载地址
<html>
<script type="text/javascript" src="<%=basePath%>/jshop/admin/js/xchart/zepto.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>/jshop/admin/js/xchart/xcharts.min.css">
<script src="<%=basePath%>/jshop/admin/js/xchart/d3.v2.min.js"></script>
<script src="<%=basePath%>/jshop/admin/js/xchart/xcharts.min.js"></script>
<script src="<%=basePath%>/jshop/admin/js/xchart/jquery-1.8.2.js"></script>
<body>
<!-- header 包含头部导航-->
<%@include file="/jshop/admin/header.jsp"%>
<!-- end header -->
<!-- content -->
<div id="content">
<!-- end content / left -->
<%@include file="/jshop/admin/left.jsp"%>
<!-- end content / left -->
<!-- content / right -->
<div id="right">
<!-- table -->
<div class="box">
<!-- box / title -->
<div class="title">
<h5>用户申请报表</h5>
</div>
<figure style="height: 300px" id="chart" >
<script type="text/javascript" src="<%=basePath%>/jshop/admin/js/trailapply/producttrialapplyXchartjs.js"></script>
</figure>
</div>
</div>
</div>
</body>
</html>
JAVAscript内容
(function () {
var data = [
{"xScale":"ordinal","comp":[],
"main":[{"className":".main.l1","data":[
{"y":12,"x":"2012-11-19T00:00:00"},
{"y":11,"x":"2012-11-20T00:00:00"},
{"y":8,"x":"2012-11-21T00:00:00"},
{"y":10,"x":"2012-11-22T00:00:00"},
{"y":1,"x":"2012-11-23T00:00:00"},
{"y":6,"x":"2012-11-24T00:00:00"},
{"y":8,"x":"2012-11-25T00:00:00"}]},
{"className":".main.l2","data":[
{"y":29,"x":"2012-11-19T00:00:00"},
{"y":33,"x":"2012-11-20T00:00:00"},
{"y":13,"x":"2012-11-21T00:00:00"},
{"y":16,"x":"2012-11-22T00:00:00"},
{"y":7,"x":"2012-11-23T00:00:00"},
{"y":18,"x":"2012-11-24T00:00:00"},
{"y":8,"x":"2012-11-25T00:00:00"}]}],
"type":"line-dotted","yScale":"linear"},
{"xScale":"ordinal","comp":[],
"main":[{"className":".main.l1","data":[
{"y":12,"x":"2012-11-19T00:00:00"},
{"y":18,"x":"2012-11-20T00:00:00"},
{"y":8,"x":"2012-11-21T00:00:00"},
{"y":7,"x":"2012-11-22T00:00:00"},
{"y":6,"x":"2012-11-23T00:00:00"},
{"y":12,"x":"2012-11-24T00:00:00"},
{"y":8,"x":"2012-11-25T00:00:00"}]},
{"className":".main.l2","data":[
{"y":29,"x":"2012-11-19T00:00:00"},
{"y":33,"x":"2012-11-20T00:00:00"},
{"y":13,"x":"2012-11-21T00:00:00"},
{"y":16,"x":"2012-11-22T00:00:00"},
{"y":7,"x":"2012-11-23T00:00:00"},
{"y":18,"x":"2012-11-24T00:00:00"},
{"y":8,"x":"2012-11-25T00:00:00"}]}],
"type":"cumulative","yScale":"linear"},
{"xScale":"ordinal","comp":[],
"main":[{"className":".main.l1","data":[{"y":12,"x":"2012-11-19T00:00:00"},
{"y":18,"x":"2012-11-20T00:00:00"},
{"y":8,"x":"2012-11-21T00:00:00"},
{"y":7,"x":"2012-11-22T00:00:00"},
{"y":6,"x":"2012-11-23T00:00:00"},
{"y":12,"x":"2012-11-24T00:00:00"},
{"y":8,"x":"2012-11-25T00:00:00"}]},
{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},
{"y":33,"x":"2012-11-20T00:00:00"},
{"y":13,"x":"2012-11-21T00:00:00"},
{"y":16,"x":"2012-11-22T00:00:00"},
{"y":7,"x":"2012-11-23T00:00:00"},
{"y":18,"x":"2012-11-24T00:00:00"},
{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"bar","yScale":"linear"}];
var order = [0, 1, 0, 2],
i = 0,
xFormat = d3.time.format('%A'),
chart = new xChart('line-dotted', data[order[i]], '#chart', {
axisPaddingTop: 5,
dataFormatX: function (x) {
return new Date(x);
},
tickFormatX: function (x) {
return xFormat(x);
},
timing: 1500
}),
rotateTimer,
toggles = d3.selectAll('.multi button'),
t = 3500;
function updateChart(i) {
var d = data[i];
chart.setData(d);
toggles.classed('toggled', function () {
return (d3.select(this).attr('data-type') === d.type);
});
return d;
}
toggles.on('click', function (d, i) {
clearTimeout(rotateTimer);
updateChart(i);
});
function rotateChart() {
i += 1;
i = (i >= order.length) ? 0 : i;
var d = updateChart(order[i]);
rotateTimer = setTimeout(rotateChart, t);
}
rotateTimer = setTimeout(rotateChart, t);
}());
分享到：
相关推荐
在本实例中，我们主要探讨如何使用Java Web技术与ECharts库来实现动态图表的展示。ECharts是一款基于JavaScript的数据可视化库，广泛应用于Web前端的数据图表制作，它提供了丰富的图表类型，灵活的交互功能，以及...
在Java开发中，FusionCharts是一款强大的图表库，它提供了丰富的图表类型以及高度自定义的能力，使得开发者可以轻松创建交互式、美观的数据可视化效果。本文将深入探讨如何使用Java实现FusionCharts图表的导出功能，...
总之，ECharts作为一款强大的JavaScript图表库，结合Java后端提供的数据，能够创建出富有视觉吸引力的图表，实现数据的高效呈现。在实际的JavaWeb项目中，我们需要理解如何正确地集成ECharts，以及如何设计后端接口...
Java 后台生成 ECharts 图表是一种常见的数据可视化方法，特别是在大数据处理和Web应用中。ECharts 是百度推出的一个开源的、基于 JavaScript 的数据可视化库，提供了丰富的图表类型和强大的交互功能。然而，在某些...
JavaScript为Eclipse编写插件是一项技术性较强的任务，它涉及到对Eclipse插件开发框架的理解、JavaScript语言的应用以及可能的Java知识。Eclipse是一个开源的集成开发环境（IDE），广泛用于Java开发，但它也支持通过...
该插件包含了饼图、折线图、柱状图、面积图和环形图等多种常见图表类型，覆盖了大部分数据分析和展示的需求，为设计师提供了丰富的选择。 安装插件的过程十分简单。用户只需在Axure RP中点击“载入元件库”，然后...
在JavaScript的世界里，创建动态且交互式的图表是常见的需求，特别是在数据分析、网页可视化以及用户界面设计中。本教程将深入探讨如何使用JS插件来实现曲线图表、柱形图表和饼状图表的显示，帮助开发者更好地理解和...
本文将深入探讨“Java调用JavaScript代码”的技术实现，以及它在实际项目中的应用场景。 Java和JavaScript虽然名字相似，但它们是两种完全不同的编程语言，各自有其特定的用途。Java是一种静态类型的、面向对象的...
在Java Web开发中，动态图表的创建是一项关键技能，它能帮助开发者呈现复杂的数据，使得信息更加直观易懂。本文将深入探讨Java Web动态图表编程的相关知识点，包括基础概念、常用库和技术，以及实践中的应用。 一、...
javascript实现的柱状统计图表,方便适用。
JavaScript图形图表库是网站开发者的重要工具，用于将数据以视觉化的方式展示出来，便于理解和分析。这篇文章汇总了35款值得收藏的JavaScript图表库，涵盖了各种类型的图表，如条形图、折线图、饼图等，适用于各种...
在"EasyUI图表插件Highcharts源码Demo(Java)"中，你可以学习如何在Java环境下集成和使用Highcharts。首先，你需要在项目中引入Highcharts的相关库文件，包括JavaScript和CSS文件。这些文件通常会被包含在HTML模板中...
在这个项目中，AJAX用于异步地从Java后端获取数据库中的数据，然后在前端用Echarts渲染图表，实现了数据的实时更新。 3. **Java后端**： Java是服务器端处理请求和响应的主要语言。在这个案例中，Java后端可能使用...
在Java中，处理前台数据和生成报表是一项常见的任务，而Echarts是一款强大的JavaScript图表库，常用于前端展示复杂的数据可视化。本话题将深入探讨如何利用Java和Echarts将前台数据与图表导出为Word文件，以及涉及到...
以上所述知识点是实现从Excel导入到图表显示的完整流程，涵盖了前端开发中常见的文件处理、数据可视化等方面。根据提供的文件内容，实际上还包含了一些代码和结构实现，但由于字数限制无法展示全部代码，但以上内容...
本工具类用java实现了JavaScript escape/unescape 编码。对接建行支付以及需要向后端传输中文数据时可以使用得到
本项目是一个基于JavaScript ECharts和Java技术的自定义标签实现设计源码，包含475个文件，包括167个JavaScript文件、108个PNG图片文件、45个GIF动画文件、35个HTML文件、35个Java源文件、20个CSS样式文件、14个JSP...
开发者可以通过设置颜色、字体、动画效果等来调整图表的外观，同时也可以绑定事件监听器，实现图表与用户的交互，如点击图表元素时显示详细信息。 总的来说，HTML5图表插件是现代Web开发中不可或缺的工具，它们利用...
基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip基于基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip...
这个"jQuery实现的环形百分比图表插件特效源码.zip"文件，很显然是一个基于jQuery的环形图表插件，提供了动态效果和自定义功能，适用于各种项目中的数据展示需求。 首先，让我们了解jQuery的基本概念。jQuery是由...