FusionCharts图表显示双Y轴双曲线
要讲解“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>- 创建一个用于显示图表的空间。
<p id="chart-container"></p>- 创建一个包含图表属性和数据的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", "numplines": "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" } ]}- 调用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", "numplines": "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> <p id="chart-container"></p></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", "numplines": "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> <p id="chart-container"></p></body></html>