要讲解“FusionCharts图表显示双Y轴双(多)曲线”，我们需要了解以下几个方面：
- FusionCharts的基本使用：
FusionCharts是一种可以创建多种类型图表的强大JavaScript库。使用FusionCharts的步骤如下： - 引入FusionCharts库文件；
- 创建一个用于显示图表的空间；
- 创建一个包含图表属性和数据的JSON对象；
-
调用FusionCharts的构造函数，并传入上一步创建的JSON对象以及用于显示图表的空间的ID。
-
FusionCharts的多Y轴支持：
FusionCharts支持在一个图表中显示多个Y轴，以便可以比较不同参数之间的趋势。要显示多个Y轴，需要在JSON对象中设置以下属性： "yAxis": [{"title": "Y轴1名称"},{"title": "Y轴2名称"}]}；-
"dataset": [{"seriesname": "曲线1名称", "renderas": "line", "data": [{"value": "曲线1数据1", "yaxis": "1"}, {"value": "曲线1数据2", "yaxis": "1"}]}, {"seriesname": "曲线2名称", "renderas": "line", "data": [{"value": "曲线2数据1", "yaxis": "2"}, {"value": "曲线2数据2", "yaxis": "2"}]}]。 -
FusionCharts的多曲线支持：
FusionCharts支持在一个图表中显示多条曲线，以便可以比较不同曲线之间的趋势。要显示多条曲线，需要在JSON对象中设置以下属性： "dataset": [{"seriesname": "曲线1名称", "renderas": "line", "data": [{"value": "曲线1数据1", "yaxis": "1"}, {"value": "曲线1数据2", "yaxis": "1"}]}, {"seriesname": "曲线2名称", "renderas": "line", "data": [{"value": "曲线2数据1", "yaxis": "1"}, {"value": "曲线2数据2", "yaxis": "1"}]}]}。
有了上面的基础知识，我们可以开始创建双Y轴双曲线的FusionCharts图表了。步骤如下：
- 在页面中引入FusionCharts的库文件。
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
- 创建一个用于显示图表的空间。
<div id="chart-container"></div>
- 创建一个包含图表属性和数据的JSON对象。
{
"chart": {
"caption": "双Y轴曲线图表",
"xaxisname": "X轴名称",
"yaxisname": "Y轴1名称",
"yAxisNameSecondary": "Y轴2名称",
"palettecolors": "0075c2,1aaf5d",
"showvalues": "0",
"legendborderalpha": "0",
"legendshadow": "0",
"legendposition": "right",
"showalternatehgridcolor": "1",
"numdivlines": "5",
"linethickness": "3",
"basefontcolor": "#333333",
"basefontsize": "12",
"bgcolor": "#ffffff",
"showcanvasborder": "0",
"canvasborderalpha": "0"
},
"categories": [
{
"category": [
{
"label": "标签1"
},
{
"label": "标签2"
},
{
"label": "标签3"
},
{
"label": "标签4"
},
{
"label": "标签5"
},
{
"label": "标签6"
},
{
"label": "标签7"
}
]
}
],
"dataset": [
{
"seriesname": "曲线1名称",
"renderas": "line",
"data": [
{
"value": "20",
"yaxis": "1"
},
{
"value": "30",
"yaxis": "1"
},
{
"value": "25",
"yaxis": "1"
},
{
"value": "35",
"yaxis": "1"
},
{
"value": "45",
"yaxis": "1"
},
{
"value": "50",
"yaxis": "1"
},
{
"value": "40",
"yaxis": "1"
}
]
},
{
"seriesname": "曲线2名称",
"renderas": "line",
"data": [
{
"value": "100",
"yaxis": "2"
},
{
"value": "90",
"yaxis": "2"
},
{
"value": "110",
"yaxis": "2"
},
{
"value": "105",
"yaxis": "2"
},
{
"value": "120",
"yaxis": "2"
},
{
"value": "130",
"yaxis": "2"
},
{
"value": "115",
"yaxis": "2"
}
]
}
],
"yAxis": [
{
"title": "Y轴1名称",
"plot":"left"
},
{
"title": "Y轴2名称",
"plot":"right"
}
]
}
以上JSON对象中，设置了图表的属性和数据，同时定义了两个Y轴和两条曲线。
- 调用FusionCharts的构造函数并传入上一步创建的JSON对象以及用于显示图表的空间的ID。
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: chartData
});
fusioncharts.render();
});
这样就完成了双Y轴双曲线的FusionCharts图表的创建和显示。
下面有两个完整的示例说明：
- 显示双Y轴双曲线的图表：
<html>
<head>
<title>双Y轴双曲线图表示例</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script>
FusionCharts.ready(function(){
var chartData = {
"chart": {
"caption": "双Y轴曲线图表",
"xaxisname": "X轴名称",
"yaxisname": "Y轴1名称",
"yAxisNameSecondary": "Y轴2名称",
"palettecolors": "0075c2,1aaf5d",
"showvalues": "0",
"legendborderalpha": "0",
"legendshadow": "0",
"legendposition": "right",
"showalternatehgridcolor": "1",
"numdivlines": "5",
"linethickness": "3",
"basefontcolor": "#333333",
"basefontsize": "12",
"bgcolor": "#ffffff",
"showcanvasborder": "0",
"canvasborderalpha": "0"
},
"categories": [
{
"category": [
{
"label": "标签1"
},
{
"label": "标签2"
},
{
"label": "标签3"
},
{
"label": "标签4"
},
{
"label": "标签5"
},
{
"label": "标签6"
},
{
"label": "标签7"
}
]
}
],
"dataset": [
{
"seriesname": "曲线1名称",
"renderas": "line",
"data": [
{
"value": "20",
"yaxis": "1"
},
{
"value": "30",
"yaxis": "1"
},
{
"value": "25",
"yaxis": "1"
},
{
"value": "35",
"yaxis": "1"
},
{
"value": "45",
"yaxis": "1"
},
{
"value": "50",
"yaxis": "1"
},
{
"value": "40",
"yaxis": "1"
}
]
},
{
"seriesname": "曲线2名称",
"renderas": "line",
"data": [
{
"value": "100",
"yaxis": "2"
},
{
"value": "90",
"yaxis": "2"
},
{
"value": "110",
"yaxis": "2"
},
{
"value": "105",
"yaxis": "2"
},
{
"value": "120",
"yaxis": "2"
},
{
"value": "130",
"yaxis": "2"
},
{
"value": "115",
"yaxis": "2"
}
]
}
],
"yAxis": [
{
"title": "Y轴1名称",
"plot":"left"
},
{
"title": "Y轴2名称",
"plot":"right"
}
]
};
var fusioncharts = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: chartData
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container"></div>
</body>
</html>
- 显示双Y轴双曲线的动态图表。
<html>
<head>
<title>动态双Y轴双曲线图表示例</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script>
FusionCharts.ready(function(){
var chartData = {
"chart": {
"caption": "双Y轴曲线动态图表",
"xaxisname": "时间",
"yaxisname": "数值1",
"yAxisNameSecondary": "数值2",
"palettecolors": "0075c2,1aaf5d",
"showvalues": "0",
"legendborderalpha": "0",
"legendshadow": "0",
"legendposition": "right",
"showalternatehgridcolor": "1",
"numdivlines": "5",
"linethickness": "3",
"basefontcolor": "#333333",
"basefontsize": "12",
"bgcolor": "#ffffff",
"showcanvasborder": "0",
"canvasborderalpha": "0"
},
"categories": [
{
"category": [
{
"label": "00:00"
},
{
"label": "01:00"
},
{
"label": "02:00"
},
{
"label": "03:00"
},
{
"label": "04:00"
},
{
"label": "05:00"
},
{
"label": "06:00"
},
{
"label": "07:00"
},
{
"label": "08:00"
},
{
"label": "09:00"
},
{
"label": "10:00"
}
]
}
],
"dataset": [
{
"seriesname": "曲线1名称",
"renderas": "line",
"data": [
{
"value": "20",
"yaxis": "1"
},
{
"value": "30",
"yaxis": "1"
},
{
"value": "25",
"yaxis": "1"
},
{
"value": "35",
"yaxis": "1"
},
{
"value": "45",
"yaxis": "1"
},
{
"value": "50",
"yaxis": "1"
},
{
"value": "40",
"yaxis": "1"
},
{
"value": "30",
"yaxis": "1"
},
{
"value": "45",
"yaxis": "1"
},
{
"value": "50",
"yaxis": "1"
},
{
"value": "55",
"yaxis": "1"
}
]
},
{
"seriesname": "曲线2名称",
"renderas": "line",
"data": [
{
"value": "100",
"yaxis": "2"
},
{
"value": "90",
"yaxis": "2"
},
{
"value": "110",
"yaxis": "2"
},
{
"value": "105",
"yaxis": "2"
},
{
"value": "120",
"yaxis": "2"
},
{
"value": "130",
"yaxis": "2"
},
{
"value": "115",
"yaxis": "2"
},
{
"value": "125",
"yaxis": "2"
},
{
"value": "135",
"yaxis": "2"
},
{
"value": "130",
"yaxis": "2"
},
{
"value": "140",
"yaxis": "2"
}
]
}
],
"yAxis": [
{
"title": "数值1",
"plot":"left"
},
{
"title": "数值2",
"plot":"right"
}
]
};
var fusioncharts = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: chartData
});
fusioncharts.render();
setInterval(function () {
fusioncharts.feedData('&label=11:00,' + Math.floor(Math.random() * 100) + ',' + Math.floor(Math.random() * 150));
}, 1000);
});
</script>
</head>
<body>
<div id="chart-container"></div>
</body>
</html>
以上就是“FusionCharts图表显示双Y轴双(多)曲线”的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：FusionCharts图表显示双Y轴双(多)曲线 - Python技术站
微信扫一扫 
支付宝扫一扫 