为了使用FusionCharts显示一个包含双Y轴和多个曲线的图表,你需要确保你的FusionCharts库是支持这种复杂图表的版本。以下是一个基于FusionCharts JavaScript库的基本示例,展示如何配置一个包含双Y轴和双曲线的图表。
首先,确保你已经引入了FusionCharts的库文件。然后,你可以使用类似以下的代码来配置你的图表:
// 图表配置JSON
var chartConfig = {
"chart": {
"caption": "双Y轴双曲线示例",
"subCaption": "图表说明",
"xAxisName": "X轴标签",
"yAxisName": "Y轴1(左侧)",
"showValues": "1",
"numberPrefix": "$",
"decimalSeparator": ",",
"decimalPrecision": "2",
"showYAxisValue": "1",
"yAxis": [{
"plotBorderAlpha": "0",
"title": "Y轴1(左侧)"
}, {
"plot": "secondary",
"formatNumberScale": "0",
"title": "Y轴2(右侧)"
}],
"placeValuesInside": "1",
"rotateValues": "1",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"canvasBorderColor": "#FFFFFF",
"bgColor": "#FFFFFF",
"showShadow": "0",
"usePlotGradientColor": "0",
"plotBorderColor": "#FFFFFF",
"plotFillAlpha": "100",
"plotFillColor": "#FFB980",
"showHoverEffect": "1",
"showLegend": "1",
"legendShadow": "0",
"legendBorderAlpha": "0",
"legendPosition": "RIGHT",
"showPlotBorder": "0"
},
"categories": [{
"category": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
}],
"dataset": [
{
"seriesname": "系列1",
"renderAs": "line",
"data": [420, 530, 500, 610, 750, 780, 800]
},
{
"seriesname": "系列2",
"parentYAxis": "S", // 指向第二个Y轴
"renderAs": "line",
"data": [20, 40, 30, 50, 70, 60, 80]
}
]
};
// 渲染图表
FusionCharts.render({
"type": "msline",
"width": "600",
"height": "400",
"dataFormat": "json",
"dataSource": JSON.stringify(chartConfig),
"containerId": "chartContainer"
});
在这个例子中,我们定义了一个包含两个Y轴的图表,每个Y轴对应一个数据系列。注意`parentYAxis`属性用于指定哪个数据系列应该使用第二个Y轴。
确保你的HTML中有一个ID为`chartContainer`的元素来承载这个图表。
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
这个配置会生成一个包含两个Y轴和两个数据系列的图表,其中第二个数据系列使用第二个Y轴进行显示。你可以根据实际需要调整图表配置,如颜色、标签、数据等。