Amcharts:插入步骤折线图值，显示插入值的气球 [英] Amcharts: Interpolating step line chart values, show balloon of interpolated value

问题描述

我是 amCharts 的新手，正在尝试创建一个非常简单的步骤折线图.

I'm a newbie at amCharts, trying to create a pretty simple step line chart.

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

I have data where the value stays constant a long time, and only records changes to the value, for example:

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

图表应该画一条水平线，直到下一个变化点，然后再画一条水平线，直到下一个，依此类推，我已经设法做到了.但是，目前，它只在数据点显示气球文本，而不是光标所在的位置，如下所示:

The chart should draw a horizontal line until the next change point, and then again until the next and so on, which I've managed to do. However, at the moment, it's only showing the balloon text at the data points and not where the cursor is, like this:

这里我在 20 点 15 分左右徘徊，尽管截图工具没有捕捉到我的光标.气球文本显示在最近的数据点处.我希望气球文本显示在我的光标处，或显示在我光标所在位置的图形上，并显示光标所在位置的时间.

Here I'm hovering around time 20:15 though the screenshot taker didn't capture my cursor. The balloon text is displayed at the nearest data point. I'd want the balloon text to show up either at my cursor, or over the graph on the spot my cursor is in, and for it to show the time at the place where the cursor is in.

我知道我可以在现有数据点之间生成新数据点，但我宁愿不这样做，因为这将是一项非常繁重的操作，因为我希望它以一秒的精度显示时间 - 那就是每小时数以千计的数据点，我相信 amCharts 有一个隐藏在某处的时间的插值选项 - 我试图在文档/谷歌中搜索这样的选项，但到目前为止没有找到.

I know I could generate new data points in between the existing ones, but would rather not, since it would be pretty heavy of an operation since I want it to show the time with an accuracy of one second - that'd be thousands of data points an hour, and I'm trusting amCharts has an interpolation option for times hidden somewhere - I tried to search the docs / google for such an option, but didn't find one so far.

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

更新:设法使用以下函数提取时间并将事件侦听器附加到 chartCursor 对象 - 但仍然无法让它显示在除图表上的预定义点之外的任何其他地方.

UPDATE: Managed to extract the time with the following functions and attaching an event listener to the chartCursor object - still can't get it to show anywhere else but on the predefined points on the graph though.

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);
}

推荐答案

气球仅显示在实际数据点上，这意味着您需要手动注入它们以在插值"时间内显示气球.在演练您的数据之后，计算先前点之间的距离并注入其间的分钟数.

the balloon only shows up on actual data points which mean you need to inject them manually to show the balloon across the "interpolated" time. Following walkthrough your data, calculates the distance between the previous points and inject the amount of minutes in between.

        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;

不幸的是，没有实现该功能的选项.

Unfortunately there is no option to achieve that functionality.

这篇关于Amcharts:插入步骤折线图值，显示插入值的气球的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！