4

最後のポイントにマーカーを描きたい。データ ソースは動的です。次のコードを見てください

$(function() {

    $("#btn").click(function() {
        var l = chart.series[0].points.length;
        var p = chart.series[0].points[l - 1];
        p.marker = {
            symbol: 'square',
            fillColor: "#A0F",
            lineColor: "A0F0",
            radius: 5
        };
        a = 1;
        chart.series[0].points[l - 1] = p;
        chart.redraw(false);

    });



    var ix = 13;
    var a = 0;

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                load: function() {
                    var series = this.series[0];
                    setInterval(function() {
                        ix++;
                        var vv = 500 + Math.round(Math.random() * 40);
                        chart.series[0].data[0].remove();
                        var v;
                        if (a == 1) v = {
                            y: vv,
                            x: ix,
                            marker: {
                                symbol: 'square',
                                fillColor: "#A0F",
                                lineColor: "A0F0",
                                radius: 5
                            }
                        }
                        else v = {
                            y: vv,
                            x: ix
                        }

                        a = 0;

                        series.addPoint(v);
                    }, 1500);
                }
            }
        },
        plotOptions: {
            series: {}
        },

        series: [{
            data: [500, 510, 540, 537, 510, 540, 537, 500, 510, 540, 537, 510, 540, 537]}]
    });
});

http://jsfiddle.net/9zNUP/

ボタン クリック イベントで、既にチャートに追加されている最後のポイントにマーカーを描画しようとしています。

それを行う方法はありますか??

4

1 に答える 1

9 
 $("#btn").click(function() {
    var l = chart.series[0].points.length;
    var p = chart.series[0].points[l - 1];
    p.update({
        marker: {
            symbol: 'square',
            fillColor: "#A0F",
            lineColor: "A0F0",
            radius: 5
        }
    });
    a = 1;

});

ソリューション @ http://jsfiddle.net/jugal/zJZSx/

また、コードを少し整理し、最後にポイントを追加する前にポイントの削除を削除しました。ハイチャートは、最初のポイントを削除してから指定されたポイントを追加するシフトシリーズを示すtrueとしてaddPointへの3番目のパラメーターで組み込みをサポートしています。

a vv などが何であるかはよくわかりませんでしたが、あまり気にしませんでした。ご要望の内容からして、これで十分だと思います。

于 2012-08-02T20:28:56.467 に答える