1、新建web项目，在WebContent目录下新建一个DoubleY.html
DoubleY.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双Y轴柱线结合图</title>
<script type="text/javascript" src="Scripts/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/JS/FusionCharts.js"></script>
<style type="text/css">
body{
width:100%;
height:100%;
}
#mixed{
background-color: #CCCCCC;
}
</style>
<script type="text/javascript">
$(function(){
var mixedChart = new FusionCharts( "Scripts/FusionChart/MSCombiDY2D.swf", "mixedChartId", "1320", "610", "0", "1" );
mixedChart.setXMLUrl("double.xml");
mixedChart.render("mixed");
});
</script>
</head>
<body>
<div id="mixed"></div>
</body>
</html>
2、数据提供源文件XML，double.xml
double.xml：
<?xml version="1.0" encoding="UTF-8"?>
<chart palette="1" caption="收入分析" showLabels="1" showvalues="0" baseFontSize='12'
sYAxisValuesDecimals="2" connectNullData="0" PYAxisName="收入"
useRoundEdges='1' numDivLines='8' SYAxisName="收入占比" formatNumberScale="0"
xAxisName='月份' sNumberSuffix="%">
<categories>
<category label='一月' />
<category label='二月' />
<category label='三月' />
<category label='四月' />
<category label='五月' />
<category label='六月' />
<category label='七月' />
<category label='八月' />
<category label='九月' />
<category label='十月' />
</categories>
<dataset seriesName="张晓明">
<set value="25601.34" />
<set value="20148.82" />
<set value="17372.76" />
<set value="35407.15" />
<set value="38105.68" />
<set value="25601.34" />
<set value="20148.82" />
<set value="17372.76" />
<set value="35407.15" />
<set value="38105.68" />
</dataset>
<dataset seriesName="李寻花">
<set value="57401.85" />
<set value="41941.19" />
<set value="45263.37" />
<set value="117320.16" />
<set value="114845.27" />
<set value="25601.34" />
<set value="20148.82" />
<set value="17372.76" />
<set value="35407.15" />
<set value="38105.68" />
</dataset>
<dataset seriesName="王虎">
<set value="55601.34" />
<set value="10148.82" />
<set value="37372.76" />
<set value="45407.15" />
<set value="58105.68" />
<set value="65601.34" />
<set value="30148.82" />
<set value="57372.76" />
<set value="39407.15" />
<set value="28105.68" />
</dataset>
<dataset seriesName="西门出席">
<set value="54501.85" />
<set value="11941.19" />
<set value="25263.37" />
<set value="11732.16" />
<set value="11485.27" />
<set value="95601.34" />
<set value="80148.82" />
<set value="57372.76" />
<set value="75407.15" />
<set value="78105.68" />
</dataset>
<dataset seriesName="李欢">
<set value="45601.34" />
<set value="30148.82" />
<set value="77372.76" />
<set value="25407.15" />
<set value="58105.68" />
<set value="65601.34" />
<set value="40148.82" />
<set value="37372.76" />
<set value="25407.15" />
<set value="18105.68" />
</dataset>
<dataset seriesName="知己">
<set value="27401.85" />
<set value="91941.19" />
<set value="35263.37" />
<set value="217320.16" />
<set value="414845.27" />
<set value="55601.34" />
<set value="70148.82" />
<set value="47372.76" />
<set value="55407.15" />
<set value="28105.68" />
</dataset>
<dataset seriesName="收入占比" parentYAxis="S">
<set value="45" />
<set value="44" />
<set value="42" />
<set value="56" />
<set value="34" />
<set value="35" />
<set value="54" />
<set value="32" />
<set value="46" />
<set value="45" />
</dataset>
</chart>
3、运行结果如下图：
分享到：
相关推荐
在本篇博客中，"JfreeChart画双Y轴折线图"的主题，将探讨如何使用JFreeChart库来创建具有两个独立Y轴的折线图，这对于显示不同尺度或单位的数据对比非常有用。 首先，我们需要了解JFreeChart的基本结构。JFreeChart...
JFreeChart双Y轴折线图实例，可以直接运行，实例类为LineChartDemo1.JAVA，有注释。 若想在web工程使用只需如下。 String filename = ServletUtilities.saveChartAsPNG(jfreechart, 600, 400, null, session); ...
在这种情况下，使用双Y轴可以提供更清晰的视觉表示。本篇将详细介绍如何利用C#语言和MSChart控件在WinForm环境中实现双Y轴的程序。 首先，MSChart是.NET Framework中用于创建图表的强大工具，它提供了丰富的功能来...
这个项目，"基于achartengine双Y轴动态图表Android源码"，专门关注如何在同一个图表上使用两个不同的Y轴来显示数据，这对于对比不同尺度的数据或者展示相关但单位不同的数据非常有用。 `achartengine`库提供了丰富...
在IT领域，尤其是在数据分析和可视化中，双Y轴折线图是一种常见的图表类型，它能够同时展示两个相关但不同尺度的数据系列。在这种图形中，一个Y轴代表一个数据集，另一个Y轴则代表另一个数据集，两个Y轴共享相同的X...
在这个特定的实例中，我们关注的是"ChartControl双Y轴显示"，这是一个高级特性，它使得在一个图表上同时展示两个不同尺度的数据成为可能。这通常用于比较不同范围或单位的数值，比如一个可能是百分比，另一个是具体...
在数据分析和可视化领域，双y轴统计图是一种特殊类型的图表，它允许我们在同一个图表上比较两个具有不同量级或单位的数据系列。这种图表通常用于显示一个数据系列与另一个相关但不同尺度的数据系列之间的关系。例如...
之前用matlab画图的时候，想画一个双x轴单Y轴图像，自己写了好久都没有实现，最后在matlab的官网上找到了这个函数，可以实现双X轴双Y轴的绘图，然后就可以利用ax.Yaxixs.Visible='off',就可以隐藏一个Y轴实现双X轴，...
- 选中需要绘制的数据列，在主菜单栏选择“绘图”->“双Y轴图”->“Line+Line”，即可自动生成双Y轴曲线图。 - 软件默认根据数据列顺序自动分配左侧Y轴和右侧Y轴，若需调整，可在“图层属性”对话框中进行修改。 ...
近来实验室的师姐要发论文，由于论文交稿时间临近，有一些杂活儿需要处理，作为实验室资历最浅的一批，我这个实习生也就责无旁贷地帮忙当个下手。今天师姐派了一个小活，具体要求是： 给一些训练模型的迭代次数，...
### 交流Origin中绘制双Y轴曲线图（柱形图）的方法 #### 一、引言 在学术研究中，为了更直观地展示不同数据集之间的对比与关联，经常需要绘制双Y轴的曲线图或柱形图。Origin是一款功能强大的科学绘图与数据分析软件...
MSChart控件以其丰富的特性和灵活性而受到开发者的青睐，但默认情况下，它仅支持两个Y轴：主Y轴和次Y轴。然而，在某些复杂的数据显示场景中，可能需要展示更多维度的数据，这就需要实现多Y轴的功能。本Demo通过...
在这个特定的场景中，我们关注的是如何使用Highcharts来绘制一个具有双Y轴的折线图，并且这两条折线不会交叉，同时根据日期设置分割线，而且要确保在旧版本的IE浏览器（如IE8）中也能正常工作。 首先，我们需要了解...
通过以上步骤，我们成功地使用Sigmaplot制作了一个包含柱形图和线性图的双Y轴图表，不仅展示了每个月的销售额，还直观地呈现了增长率的变化趋势。这种图表非常适合用于展示复杂的数据关系，尤其是在商业分析、市场...
在本例中，我们将探讨如何制作一个折线图与柱状图相结合的双Y轴图表，以展示折线图（可能代表趋势或时间序列数据）和柱状图（可能代表分类数据）。 步骤1：首先，确保你已经准备好了包含两个数据系列的数据表。第一...
本文将详细介绍如何实现ECharts的双Y轴，并让左右两个Y轴的刻度线保持一致。 首先，我们需要创建两个Y轴（`yAxis`），每个轴都有其特定的属性和配置。以下是一个简单的示例： ```javascript yAxis : [ { type : ...
公司业务需要需要做一个双X双Y的图形报表，之前研究过很多例子结合把双X轴不等分显示； 1、有曲线图、有柱状图 2、X轴分组合并显示 3、可自行修改显示数值和比例在一个图上
MATLAB 双y轴曲线的画法，注释说明了运用的函数，轴曲线的类型、颜色，坐标轴的刻度等
示例qcustomplot多条曲线多个Y轴.cpp