Amcharts并未在所有图表中显示一个气球

时间:2018-10-22 09:58:48

标签: javascript amcharts

我想为所有堆叠的抓钩配备1个气球。我将代码更改为使用this。不幸的是,messages数据没有显示。

enter image description here

我做错了吗?

function createChart(chartDiv, title) {
    return AmCharts.makeChart(chartDiv, {
        "type": "stock",    
        "theme": "black",           
        "chartCursor": {
            "oneBalloonOnly": true,
        },
        "dataSets": [{
            "fieldMappings": [{
                "fromField": "ack",
                "toField": "ack"
            }, {
                "fromField": "messages",
                "toField": "messages"
            }],
            "color": "#1d6a96",
            "categoryField": "date",
        }],
        "categoryAxesSettings": {
            "alwaysGroup": true,
            "groupToPeriods": ["6mm"],
            "minPeriod": "4mm",
            "dashLength": 0,
        },
        "panels": [{
            "gridAboveGraphs": true,
            "stockGraphs": [{
                "type": "column",
                "id": "g1",
                "valueField": "ack",
                "lineColor": "#7f8da9",
                "fillColors": "#7f8da9",
                "fillAlphas": 0.85,
                "periodValue": "Sum",
                "useDataSetColors": false,
                "balloonText": "Ack:[[value]], missing:[[messages]]",
            }, {
                "type": "column",
                "id": "g2",
                "valueField": "messages",
                "lineColor": "#FDD400",
                "fillColors": "#FDD400",
                "fillAlphas": 0.85,
                "periodValue": "Close",
                "useDataSetColors": false,
                "showBalloon": false
            }],
        }],
        "valueAxesSettings": {
            "inside": false,
            "id": "v1",
            "dashLength": 0,
            "minimum": 0,
            "gridAlpha": 0,
            "stackType": "regular",
            "axisAlpha": 0.5,
            "showFirstLabel": false,
        },
    });
}

我正在将数据从json转换为ajax响应中的图表。

function insertChartData(chart, response) {
    var dataProvider = [];
    for (var i = 0; i < response.Stats.length; i++) {
        dataProvider.push({
            date: new Date(response.Stats[i].Checked),
            ack: response.Stats[i].Income,
            messages: response.Stats[i].Messages,
        });
    }

    chart.AmChart.dataSets[0].dataProvider = dataProvider;
    chart.AmChart.validateData();
}

1 个答案:

答案 0 :(得分:1)

这是由于股票图表的data grouping functionality而引起的。当它聚合您的数据时,按名称引用字段将不再起作用,因为它们没有保留在内部数据分组结构中(对于lineColorField之类的字段也是如此)。您需要通过将maxSeries设置为0来禁用数据分组,以便按名称引用属性。

    "categoryAxesSettings": {
        "maxSeries": 0,
        "minPeriod": "4mm",
        "dashLength": 0,
    },

如果您有大量数据,这将影响性能。

Demo