FusionCharts图表显示双Y轴双(多)曲线


为了使用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轴进行显示。你可以根据实际需要调整图表配置,如颜色、标签、数据等。