`

java javascript 中实现xchart插件（图形，图表等）

javajavascripthtmlFlashJavaScript 
阅读更多
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 中关于备份和还原mysql数据库
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    在SonarQube上使用java自定义JavaScript检测规则

    本文将详细介绍如何使用 Java 开发 SonarQube JavaScript 检测规则，包括规则定义、插件开发和规则实现等步骤。 规则定义 在 SonarQube 中，规则定义是检测规则的核心部分。规则定义包括规则的描述、优先级、标签...

    Java 实现 FusionCharts 图表导出图片或PDF文件功能实例源码

    在Java开发中，FusionCharts是一款强大的图表库，它提供了丰富的图表类型以及高度自定义的能力，使得开发者可以轻松创建交互式、美观的数据可视化效果。本文将深入探讨如何使用Java实现FusionCharts图表的导出功能，...

    javascript dhtmlx 图形图表制作

    JavaScript 和 DHTMLX 图形图表制作是Web开发中用于创建动态和交互式数据可视化的技术。DHTMLX是一个强大的JavaScript库，它提供了多种组件，包括图表（Chart）模块，可以帮助开发者构建高质量的数据图形。 首先，...

    java 实现整张网页快照

    在Java编程环境中，生成网页快照是一项常见的需求，主要用于数据抓取、网页存档或测试自动化等场景。这里我们关注的焦点是如何利用Java实现整张网页的快照功能。通过标题"java 实现整张网页快照"和描述，我们可以...

    Axure8动态图表插件.zip

    该插件包含了饼图、折线图、柱状图、面积图和环形图等多种常见图表类型，覆盖了大部分数据分析和展示的需求，为设计师提供了丰富的选择。 安装插件的过程十分简单。用户只需在Axure RP中点击“载入元件库”，然后...

    JS插件实现图表显示（曲线图表、柱形图表、饼状图表）

    在JavaScript的世界里，创建动态且交互式的图表是常见的需求，特别是在数据分析、网页可视化以及用户界面设计中。本教程将深入探讨如何使用JS插件来实现曲线图表、柱形图表和饼状图表的显示，帮助开发者更好地理解和...

    Java调用javaScript代码

    本文将深入探讨“Java调用JavaScript代码”的技术实现，以及它在实际项目中的应用场景。 Java和JavaScript虽然名字相似，但它们是两种完全不同的编程语言，各自有其特定的用途。Java是一种静态类型的、面向对象的...

    EasyUI图表插件Highcharts源码Demo(Java)

    在"EasyUI图表插件Highcharts源码Demo(Java)"中，你可以学习如何在Java环境下集成和使用Highcharts。首先，你需要在项目中引入Highcharts的相关库文件，包括JavaScript和CSS文件。这些文件通常会被包含在HTML模板中...

    Echarts+ajax+java+mysql实现饼图+折线图+柱状图

    在这个项目中，AJAX用于异步地从Java后端获取数据库中的数据，然后在前端用Echarts渲染图表，实现了数据的实时更新。 3. **Java后端**： Java是服务器端处理请求和响应的主要语言。在这个案例中，Java后端可能使用...

    java 前台数据和echarts图表导出为word文件的jar

    在Java中，处理前台数据和生成报表是一项常见的任务，而Echarts是一款强大的JavaScript图表库，常用于前端展示复杂的数据可视化。本话题将深入探讨如何利用Java和Echarts将前台数据与图表导出为Word文件，以及涉及到...

    Javascript 实现 Excel 导入生成图表功能

    以上所述知识点是实现从Excel导入到图表显示的完整流程，涵盖了前端开发中常见的文件处理、数据可视化等方面。根据提供的文件内容，实际上还包含了一些代码和结构实现，但由于字数限制无法展示全部代码，但以上内容...

    JavaScript escape/unescape 编码的 Java 实现

    本工具类用java实现了JavaScript escape/unescape 编码。对接建行支付以及需要向后端传输中文数据时可以使用得到

    基于JavaScript ECharts的Java自定义标签实现设计源码

    本项目是一个基于JavaScript ECharts和Java技术的自定义标签实现设计源码，包含475个文件，包括167个JavaScript文件、108个PNG图片文件、45个GIF动画文件、35个HTML文件、35个Java源文件、20个CSS样式文件、14个JSP...

    一款基于html5的图表插件

    开发者可以通过设置颜色、字体、动画效果等来调整图表的外观，同时也可以绑定事件监听器，实现图表与用户的交互，如点击图表元素时显示详细信息。 总的来说，HTML5图表插件是现代Web开发中不可或缺的工具，它们利用...

    jq图表插件

    "jq图表插件"是一种基于JavaScript库jQuery的可视化图表工具，它使得在网页上创建交互式图表变得简单易行。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，而jq图表插件则在此基础上...

    基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip

    基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip基于基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip基于python+JavaScript实现显示文件的二进制图表(软件构造大作业).zip...

    jQuery实现的环形百分比图表插件特效源码.zip

    这个"jQuery实现的环形百分比图表插件特效源码.zip"文件，很显然是一个基于jQuery的环形图表插件，提供了动态效果和自定义功能，适用于各种项目中的数据展示需求。 首先，让我们了解jQuery的基本概念。jQuery是由...

    javascript插件

    常见的JavaScript插件有用于图像处理的如Photoswipe，用于图表绘制的如Chart.js，用于日期时间管理的如Moment.js，以及用于表单验证的如validate.js等。 "css"是Cascading Style Sheets的缩写，是一种样式表语言，...

    一个java的jar包可以集成到IDE中做JAVASCRIPT的测试。

    值得注意的是，随着技术的发展，现在更多的人可能选择使用TypeScript或者其他与JavaScript紧密相关的语言，这些语言提供了静态类型检查和更好的工具支持，但也同样可以与Java环境集成，实现类似的功能。 总的来说，...

    几种实用的JQuery图表插件

    JQuery作为一款广泛使用的JavaScript库，提供了许多优秀的图表插件来实现这一功能。本篇文章将详细介绍几种实用的JQuery图表插件，包括Flot、Highcharts、jquerychart和jqPlot，并提供相关资源下载和中文帮助文档。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics