Question

我是amCharts的新手，试图创建一个非常简单的步骤线图。

我有数据，其值长时间保持不变，只记录值的变化，例如：

{
    "timeOfDay": "18:20",
    "value": 100
}, {
    "timeOfDay": "19:40",
    "value": 80
}, {
    "timeOfDay": "21:40",
    "value": 20
}, {
    "timeOfDay": "22:40",
    "value": 50
} // and so on

图表应绘制一条水平线直到下一个更改点，然后再绘制到下一个等等，这是我设法做到的。但是，目前，它只显示数据点处的气球文本而不是光标所在的位置，如下所示： amcharts balloon at wrong place

虽然截图接受者没有抓住我的光标，但我在20:15左右徘徊。气球文本显示在最近的数据点。我希望气球文本显示在我的光标上，或者显示在光标所在位置的图形上，以及它显示光标所在位置的时间。

我知道我可以在现有的数据之间生成新的数据点，但不愿意，因为操作非常繁重，因为我希望它以一秒的精度显示时间 - 这是每小时有数千个数据点，我相信amCharts有一个插值选项，隐藏在某个地方的时间 - 我试图搜索docs / google这样的选项，但到目前为止还没找到。

编辑：此处的当前图表代码：http://pastebin.com/BEZxgtCb

UPDATE：管理以使用以下函数提取时间并将事件侦听器附加到chartCursor对象 - 但仍然无法在图表上的预定义点上显示它以外的任何地方。

var parseDate = function(dateObj) {
    return dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds();
}

var handleMove = function(event) {
    var time = event.chart.categoryAxis.coordinateToDate(event.x);
    event.chart.graphs[0].balloonText = parseDate(time);
}

Answer 1

气球仅显示实际数据点，这意味着您需要手动注入气球以显示气球，并插入＆＃34;插入＆＃34;时间。在遍历您的数据之后，计算先前点之间的距离并注入两者之间的分钟数。

        var prevTime = undefined;
        var prevValue = undefined;
        var interpolate = [];
        for ( var i1 = 0; i1 < chart.dataProvider.length; i1++ ) {
            var item = chart.dataProvider[i1];
            var curTime = AmCharts.stringToDate(item.timeOfDay,"JJ:NN")
            var curVal = item.value;

            if ( prevTime ) {
                var distance = (Number(curTime) - Number(prevTime)) / 1000 / 60;
                for ( var i2 = 0; i2 < distance; i2++ ) {
                    var newDate = new Date(prevTime);
                    newDate.setMinutes(prevTime.getMinutes() + i2);

                    if ( Number(newDate) < Number(curTime) ) {
                        interpolate.push({
                            timeOfDay: AmCharts.formatDate(newDate,"JJ:NN"),
                            value: prevValue
                        });
                    }
                }
            }

            // NEW ONE
            interpolate.push(item);

            // FOR NEXT TIME
            prevTime = curTime;
            prevValue = curVal;
        }
        chart.dataProvider = interpolate;

不幸的是，没有选择来实现这一功能。

Amcharts：插值步骤线图值，显示插值的气球

1 个答案: