javascript将数据展示成饼状图、柱状图和折线图

本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已;还有很多方法可以用于展示图表,例如自定义图表标签、使用jfreechart插件等;

1、导入js文件,包含了很多展示方法:

<script type="text/javascript" src=<select:link page="/js/ChartObject.js"/>></script>
<script type="text/javascript" src=<select:link page="/js/FusionCharts.js"/>></script>

2、从后台获取数据:

function init(){

        var name3="<%=request.getAttribute("accountlist.name")%>";
        var value3="<%=request.getAttribute("accountlist.values")%>";
        var rate3="<%=request.getAttribute("accountlist.valueshb")%>";
        showChart4(name3,rate3);
        //showChart3(name3,value3,"");    

  }

3、将数据赋值给图例:

function showChart4(names,values){
        var chartObj = new ChartObject();
        var xmlString="";
        chartObj.caption="各承运单位车辆销运比图 ";
        chartObj.showValues=‘0‘;
        chartObj.showLabels=‘1‘;
        chartObj.sNumberSuffix=‘%25‘;
        xmlString = chartObj.createDualYMSColumnXmlByValues(names,values,"","销运比=卷烟销量%车辆运力;","");
        var chart = new FusionCharts("Charts/MSColumn3DLineDY.swf", "ChartId2", "1000", "230", "0", "0");
        chart.setDataXML(xmlString);
        chart.render("chartDiv2");
    }

使用的是下面的这个flash:

4、在jsp页面中只需写入:

<div style="margin-top:3px;margin-left:3px;"><span id="chartDiv2" style="width:100%;"></span></div>

5.结果展示如下所示:

时间: 2024-11-07 11:35:47

javascript将数据展示成饼状图、柱状图和折线图的相关文章

PHP实现动态生成饼状图、柱状图和折线图(转载)

PHP在图像操作方面的表现非常出色,我们只需借助可以免费得到的GD库便可以轻松实现图.表勾画.下面将分别介绍PHP实现的饼状图.折线图和柱状图以 及他们的使用方法,这几段代码的特点就是不需要再把它们复制到你的代码之中,只需要把计算得到的数据作为参数传入,即可得到相应的图形效果 代码中所有使用的函数的说明,请参见php开发文档 饼状图 设计思路 饼状图表对于查看一个值占总值的百分比是一个好的方法.我们就用PHP来实现一个饼形图表. 它的设计思想是: 1 接受参数,得到所有数值的和,得到每一个值占数

java代码实现highchart与数据库数据结合完整案例分析(二)---折线图

作者原创:未经博主允许不许转载 在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客. 现在分析和展示折线图的绘制和案例分析, 先展示效果图: 与饼状图不同的是,折线图展现更多的数据,也会体现出更多的自动性. 先展示一下js代码: <!-- 播放类型统计折线图 --> <script type="text/javascript"> $(function () { var livFlowList=document.getElementById(

数据可视化分析(柱状图、折线图、热力图)

一.项目简介 1.1    项目博客地址 https://rpc.cnblogs.com/metaweblog/yyh28 1.2    项目完成的功能与特色 分析文件‘集美大学各省录取分数.xlsx’,完成以下功能: 1)集美大学2015-2018年间不同省份在本一批的平均分数,柱状图展示排名前10的省份, 2)分析福建省这3年各批次成绩情况,使用折线图展示结果,并预测2019年录取成绩 3)分析其他省份数据.用热力图,地图方式绘制所有省份数据情况. 1.3 项目采用的技术栈 Numpy:矩阵

如何使用SAP UI5 web Component的React框架的柱状图和折线图

导入柱状图和折线图: import { BarChart, LineChart } from "@ui5/webcomponents-react-charts": 在自定义的React Component里,为图标创建数据集和数据标签对应的JavaScript数组: 最后在React 自定义组件里,直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组: 最后的效果,折线图: 柱状图: 不出意外,还是通过canvas实现的: 要获取更多Jerry

如何绘制双轴柱状图和折线图?

如何绘制双轴柱状图和折线图? 答:第1步,先将数据作成如下表格. ××市2010--2014年农业灌溉用水有效利用系数 年份 灌溉亩数(万亩) 毛灌溉用水总量(万米3) 净灌溉用水总量(万米3) 灌溉水有效利用系数 考核标准 2010年 1.57 1440 691 0.48 0.55 2011年 1.57 1142 628 0.55 0.55 2012年 1.57 966 628 0.65 0.55 2013年 1.57 966 628 0.65 0.55 2014年 1.57 966 628

Python 中 plt 画柱状图和折线图

1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np.array(array) plt.hist(array, bins=50,facecolor="red", edgecolor="red" ,linewidth=5,alpha=0.7) plt.xlabel("") plt.ylabel("

Echart饼图、柱状图、折线图(pie、bar、line)添加点击事件

var myChart= echarts.init(document.getElementById('myChart')); myChart.on('click', function (param) { alert('点击了我!'); }); Echart事件参数可以去config.js查找 Echart饼图.柱状图.折线图(pie.bar.line)添加点击事件

JavaScript+svg绘制的一个饼状图

svg参考:https://www.w3.org/TR/SVG/ <body onload='document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, ["red","blue","yellow","green"], ["North","South","East","W

用FusionChartsFree做饼状图、柱状图、折线图的实例

1.先来看看要进行表现的页面:myChart.jsp <%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/