FusionCharts 2D柱状图和折线图的组合图 -XML/RSS教程-PHP中文网

首页

后端开发

XML/RSS教程

FusionCharts 2D柱状图和折线图的组合图

黄舟

Feb 15, 2017 pm 03:19 PM

1、设计思路

（1）了解组合图的特性以及用法，选用图的类型；

（2）设计出两根柱子和两根折线，分开展示。

2、设计步骤

（1）设计页面

Column2DLine.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FuionCharts 2D柱状图和折线图组合图</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../scripts/Charts/FusionCharts.js"></script>
    <script type="text/javascript">
        $(function(){
              var column2DLine = new FusionCharts( "../scripts/Charts/MSCombi2D.swf", "doubleAreaId", "100%", "540", "0" );
      		  column2DLine.setXMLUrl("data/columnLine.xml");
              column2DLine.render("columnLine");
        });
    </script>

  </head>
  
  <body>
    <p id="columnLine"></p>
  </body>
</html>

登录后复制

（2）设计出数据源

columnLine.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart caption=&#39;2010-2013年某人年收入详细&#39; xAxisName=&#39;月份&#39; yAxisName=&#39;收入&#39; showValues=&#39;0&#39;
       baseFont=&#39;微软雅黑&#39; baseFontSize=&#39;14&#39; baseFontColor=&#39;#00FF00&#39; outCnvBaseFont=&#39;宋体&#39;
       outCnvBaseFontSize=&#39;20&#39; outCnvBaseFontColor=&#39;#0000FF&#39;>

   <categories>
      <category label=&#39;一月&#39; />
      <category label=&#39;二月&#39; />
      <category label=&#39;三月&#39; />
      <category label=&#39;四月&#39; />
      <category label=&#39;五月&#39; />
      <category label=&#39;六月&#39; />
      <category label=&#39;七月&#39; />
      <category label=&#39;八月&#39; />
      <category label=&#39;九月&#39; />
      <category label=&#39;十月&#39; />
      <category label=&#39;十一月&#39; />
      <category label=&#39;十二月&#39; />
   </categories>

   <dataset seriesName=&#39;2010&#39;>
      <set value=&#39;59845&#39; />
      <set value=&#39;36562&#39;/>
      <set value=&#39;15421&#39; />
      <set value=&#39;56213&#39; />
      <set value=&#39;45121&#39; />
      <set value=&#39;56232&#39; />
      <set value=&#39;56121&#39; />
      <set value=&#39;23565&#39; />
      <set value=&#39;85656&#39; />
      <set value=&#39;45421&#39; />
      <set value=&#39;23561&#39; />
      <set value=&#39;24801&#39; />
   </dataset>
   
   <dataset seriesName=&#39;2011&#39; renderAs=&#39;Line&#39;>
      <set value=&#39;56122&#39; />
      <set value=&#39;65121&#39;/>
      <set value=&#39;45154&#39; />
      <set value=&#39;20120&#39; />
      <set value=&#39;95656&#39; />
      <set value=&#39;46522&#39; />
      <set value=&#39;65323&#39; />
      <set value=&#39;62311&#39; />
      <set value=&#39;95656&#39; />
      <set value=&#39;65322&#39; />
      <set value=&#39;74545&#39; />
      <set value=&#39;56231&#39; />
   </dataset>
   
   <dataset seriesName=&#39;2012&#39;>
      <set value=&#39;95656&#39; />
      <set value=&#39;54132&#39;/>
      <set value=&#39;45511&#39; />
      <set value=&#39;23200&#39; />
      <set value=&#39;65622&#39; />
      <set value=&#39;32600&#39; />
      <set value=&#39;54512&#39; />
      <set value=&#39;56232&#39; />
      <set value=&#39;26562&#39; />
      <set value=&#39;45421&#39; />
      <set value=&#39;52211&#39; />
      <set value=&#39;65623&#39; />
   </dataset>

   <dataset seriesName=&#39;2013&#39; renderAs=&#39;Line&#39;>
      <set value=&#39;56444&#39;/>
      <set value=&#39;65232&#39;/>
      <set value=&#39;12123&#39;/>
      <set value=&#39;21222&#39;/>
      <set value=&#39;78454&#39; />
      <set value=&#39;56211&#39; />
      <set value=&#39;42422&#39; />
      <set value=&#39;95655&#39; />
      <set value=&#39;45455&#39; />
      <set value=&#39;95656&#39; />
      <set value=&#39;22900&#39; />
      <set value=&#39;41512&#39; />
   </dataset>

</chart>

登录后复制

3、设计结果

以上就是FusionCharts 2D柱状图和折线图的组合图的内容，更多相关内容请关注PHP中文网（www.php.cn）！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7529

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

WPS表格折线图怎么做你真的会吗 Mar 21, 2024 am 08:36 AM

使用wps表格进行大量的数据处理可以使我们的工作更加有效率，当然，wps表格不光能处理数据，还可以根据数据制定折线图图表等数据，这样查看时更佳直观。可对于有些新手来说，不知道wps表格折线图怎么做，今天我就跟大家讲解下制作折线图的详细步骤：1、首先查看【折线图的使用场景】。2、制作方法：首先选择【数据源-插入图表-折线图】点击【图表元素-勾选趋势线-图表中会相应的出现一道虚线】。3、然后在【数据源中插入一列为平均值】使用【AVERAGE进行求平均值】下拉填充的方法【先复制粘贴值-然后在下拉填充】

Vue统计图表的柱状和折线图功能实现 Aug 17, 2023 am 11:39 AM

Vue统计图表的柱状和折线图功能实现引言:在数据可视化的应用中，统计图表是一种常用的展示数据的方式。而Vue作为一种流行的JavaScript框架，提供了丰富的功能和易用性，非常适合用于实现统计图表。本文将介绍使用Vue实现柱状图和折线图的具体步骤，并附上代码示例。一、柱状图实现柱状图是一种以矩形的高度来表示数据大小的图表。下面是使用Vue和echarts库

PPT制作折线和柱形混合图表的步骤 Mar 26, 2024 pm 09:26 PM

1、在PPT中插入数据图，类型选择【簇状柱形图】。2、输入源数据，只使用两列数据，比如，第一列为月数据，第二列为月累计数据。3、更改累计数据系列的图表类型，点击图表工具下的"更改图表类型，点击【组合】，累计数据选择带数据标记的折线图，并勾选次坐标轴。4、点击确定后，得到了基本的组合图形。5、添加柱形图和折线图的数据标签。并设置不同颜色以示区别。6、对数据图做进一步美化，删除不必要的元素，凸显信息，得到最终图表。

fusioncharts.js的使用详解 Dec 08, 2023 pm 01:45 PM

fusioncharts.js提供了丰富的图表类型、数据可视化和交互功能，可以帮助开发人员在 Web 应用程序中创建高质量的图表和仪表。

如何在ECharts中使用折线图展示数据趋势 Dec 17, 2023 am 11:12 AM

如何在ECharts中使用折线图展示数据趋势ECharts是一款基于JavaScript的开源可视化库，被广泛应用于各类数据分析和可视化展示项目中。它提供了丰富的图表类型和交互功能，使得数据的呈现更加直观和易于理解。本文将详细介绍如何使用ECharts中的折线图展示数据趋势，并提供具体的代码示例。一、准备工作在开始使用ECharts绘制折线图之前，我们需要做

入门教程：学习使用matplotlib绘制折线图 Jan 17, 2024 am 10:36 AM

简易教程：学会使用Matplotlib绘制折线图引言：Matplotlib是Python中常用的绘图库之一，可以用于绘制各种类型的图形，包括折线图。折线图是一种常用的数据可视化方式，能够清晰展示数据的变化趋势。本文将通过具体的代码示例，介绍如何使用Matplotlib绘制折线图。一、安装Matplotlib库：在使用Matplotlib之前，首先需要安装它。

Vue 中如何实现折线图、曲线图等数据可视化技巧 Jun 25, 2023 am 11:34 AM

Vue是一款流行的JavaScript框架，它被广泛应用于构建现代Web应用程序。数据可视化是Web应用程序中必不可少的技术之一，而折线图和曲线图则是常见的数据可视化技巧之一。在这篇文章中，我将介绍如何使用Vue来实现折线图和曲线图。1.使用第三方图表库Vue有很多第三方图表库可以使用，这些图表库提供了丰富的图表类型和配置选项，使得实现折线图和曲线图变得十分

使用PHP和FusionCharts创建数据可视化图表 May 11, 2023 am 09:40 AM

随着现代业务日益数字化，数据处理和可视化日益重要。许多公司依靠数据可视化来理解其业务状况并作出战略决策。在这篇文章中，我们将讨论如何使用PHP和FusionCharts创建数据可视化图表。FusionCharts是一组用于创建漂亮、动态、可交互的图表的JavaScript库。它支持多种类型的图表，包括线性图、饼状图、柱状图、散点图等等。FusionChart

See all articles

FusionCharts 2D柱状图和折线图的组合图

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题