AmCharts v3如何在同一图表展示煤堆高度与室外温度双数据集

无需合并两个JSON数据集，直接为Serial Chart添加两个独立的图表系列，分别绑定左右Y轴即可。这样单个数据集出错不会影响另一个系列的展示，完美规避传感器故障带来的合并风险。

实现步骤 #

• 初始化Serial Chart时配置两个Y轴：左轴对应煤堆高度，右轴对应室外温度
• 为每个数据集创建独立的AmGraph，分别关联对应Y轴和数据字段
• 加载两个数据集后，直接为对应系列赋值并刷新图表

代码示例 #

// 初始化图表实例
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataDateFormat": "YYYY-MM-DD HH:mm",
    // 配置双Y轴
    "valueAxes": [{
        "id": "heightAxis",
        "axisTitle": "煤堆高度 (cm)",
        "position": "left"
    }, {
        "id": "tempAxis",
        "axisTitle": "室外温度 (°C)",
        "position": "right",
        "gridAlpha": 0 // 隐藏右轴网格，避免视觉重叠
    }],
    // 配置两个独立系列
    "graphs": [{
        "id": "heightGraph",
        "valueAxis": "heightAxis",
        "lineColor": "#FF6347",
        "bullet": "round",
        "bulletSize": 6,
        "valueField": "height",
        "title": "煤堆高度",
        "type": "smoothedLine"
    }, {
        "id": "tempGraph",
        "valueAxis": "tempAxis",
        "lineColor": "#4682B4",
        "bullet": "square",
        "bulletSize": 6,
        "valueField": "temperature",
        "title": "室外温度",
        "type": "smoothedLine"
    }],
    "categoryField": "timestamp",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "hh",
        "axisColor": "#DADADA",
        "dashLength": 1
    },
    "legend": {
        "useGraphSettings": true
    }
});

// 加载煤堆高度数据（示例AJAX请求）
$.getJSON("get_coal_height.php", function(data) {
    chart.graphs[0].dataProvider = data;
    chart.validateData(); // 刷新图表
});

// 加载室外温度数据（示例AJAX请求）
$.getJSON("get_temperature.php", function(data) {
    chart.graphs[1].dataProvider = data;
    chart.validateData(); // 刷新图表
});

AmCharts v5架构更灵活，同样支持独立加载两个数据集并绑定不同Y轴，且交互体验和性能优于v3，推荐升级采用。

实现步骤 #

• 创建XYChart实例，添加时间X轴和两个Y轴（左、右）
• 为每个数据集创建独立的LineSeries，分别关联对应Y轴和数据字段
• 加载数据后直接赋值给对应系列的data属性

代码示例 #

am5.ready(function() {
    var root = am5.Root.new("chartdiv");
    root.setThemes([am5themes_Animated.new(root)]);

    // 创建XYChart容器
    var chart = root.container.children.push(
        am5xy.XYChart.new(root, {
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX",
            pinchZoomX: true,
            paddingLeft: 0
        })
    );

    // 配置时间X轴
    var xAxis = chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            baseInterval: { timeUnit: "hour", count: 1 },
            renderer: am5xy.AxisRendererX.new(root, {
                minorGridEnabled: true,
                minGridDistance: 50
            }),
            tooltip: am5.Tooltip.new(root, {})
        })
    );

    // 左Y轴：煤堆高度
    var yAxisLeft = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" }),
            title: am5.Label.new(root, {
                text: "煤堆高度 (cm)",
                rotation: -90,
                centerY: am5.p50,
                centerX: am5.p100
            })
        })
    );

    // 右Y轴：室外温度
    var yAxisRight = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            renderer: am5xy.AxisRendererY.new(root, {
                opposite: true,
                pan: "zoom"
            }),
            title: am5.Label.new(root, {
                text: "室外温度 (°C)",
                rotation: 90,
                centerY: am5.p50,
                centerX: am5.p0
            })
        })
    );

    // 煤堆高度系列
    var heightSeries = chart.series.push(
        am5xy.LineSeries.new(root, {
            name: "煤堆高度",
            xAxis: xAxis,
            yAxis: yAxisLeft,
            valueYField: "height",
            valueXField: "timestamp",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{name}: {valueY} cm"
            })
        })
    );
    heightSeries.strokes.template.setAll({ strokeWidth: 2 });
    heightSeries.bullets.push(function() {
        return am5.Bullet.new(root, {
            sprite: am5.Circle.new(root, {
                radius: 4,
                fill: heightSeries.get("fill")
            })
        });
    });

    // 室外温度系列
    var tempSeries = chart.series.push(
        am5xy.LineSeries.new(root, {
            name: "室外温度",
            xAxis: xAxis,
            yAxis: yAxisRight,
            valueYField: "temperature",
            valueXField: "timestamp",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{name}: {valueY} °C"
            })
        })
    );
    tempSeries.strokes.template.setAll({ strokeWidth: 2 });
    tempSeries.bullets.push(function() {
        return am5.Bullet.new(root, {
            sprite: am5.Rectangle.new(root, {
                width: 6,
                height: 6,
                fill: tempSeries.get("fill")
            })
        });
    });

    // 添加图例
    chart.set("legend", am5.Legend.new(root, {}));

    // 加载煤堆高度数据
    fetch("get_coal_height.php")
        .then(response => response.json())
        .then(data => {
            data.forEach(item => {
                item.timestamp = new Date(item.timestamp);
            });
            heightSeries.data.setAll(data);
        });

    // 加载室外温度数据
    fetch("get_temperature.php")
        .then(response => response.json())
        .then(data => {
            data.forEach(item => {
                item.timestamp = new Date(item.timestamp);
            });
            tempSeries.data.setAll(data);
        });
});

核心优势 #

• 两个数据集完全独立，单个传感器故障仅影响对应系列，不会导致整个图表失效
• 双轴区分不同单位的指标，视觉展示清晰直观
• v5版本具备更好的响应式表现和交互流畅度

内容的提问来源于stack exchange，提问作者PedroKV