Question

您好我正在尝试学习高级图，在阅读文档时，我很难探索如何解决我的问题。你能帮我删除以前点的标记并只保留折线图的当前标记吗？

$(document).ready(function () {
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
});

这是我想要做的图像正在显示一个标记。

我正在使用高图的jsfiddle演示，这里是 link

Answer 1

您可以为除最后一个点之外的每个点禁用标记。

开始时：

      series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random(),
                    marker: {
                      enabled: i === 0
                    }
                });
            }
            return data;
        }())
    }]

在添加新点之前的最后一点禁用标记：

          events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.data[series.data.length - 1].update({
                      marker: { enabled: false }
                    }, false)
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }

示例：http://jsfiddle.net/m9ykaaa7/

Answer 2

默认情况下，您必须隐藏数据点的标记。您必须更新highcharts对象以包含以下选项：

plotOptions: {
    series: {
        marker: {
            enabled: false
        }
    }
}

现在，每次添加点时，都必须添加如下：

series.addPoint({
  x: x,
  y: y,
  marker: {enable: true}
});

通过更新属性隐藏最后一点的标记：

last_point.update({ marker: { enabled: false } });

以下是一个工作示例：http://jsfiddle.net/10yfarod/

修改

您可以在将点添加到系列后添加标记。但这会让那些流畅的线条动画变得混乱。为避免这种情况，您可以使用setTimeout在动画结束后500ms后显示标记。

以下是一个工作示例：http://jsfiddle.net/10yfarod/1/

删除以前的标记并仅保留单个标记高图

2 个答案:

修改