0

我遇到了一个奇怪的错误。为了重现它，我这样做了。

我有一张我重复使用的图表。我首先使用 data_1 加载图表，并使用 addAnnotation() 加载 annotations_1，这很有效。

然后我用 data_2 更新图表，并通过 removeAnnotations(id) 删除 annotations_1。并加载 annotations_2，它可以工作

如果我现在回来重新加载 data_1，删除 annotations_2，然后尝试重新加载 annotations_1，它就不起作用。图表数据显示正常，但没有注释。

[更新] 我无法保存或分叉 jsfiddle ！？所以我把我的代码放在这里。现在我有一个稍微不同的错误。如果我第二次单击“按钮 1”，则永远不会重新更新数据。完成“按钮 1”后，再执行“按钮 2”。

html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<button id="btn1">1</button>
<button id="btn2">2</button>
<div id="container"></div>

css

#container, .highcharts-data-table table {
    min-width: 350px; 
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 450px;
}

js + 加载 jquery

// Data generated from http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html
var elevationData_1 = [   [70.6, 597],
    [70.7, 591],
    [70.8, 590],
    [70.9, 587],
    [71.0, 584],
    [71.1, 584],
    [71.2, 582],
    [71.3, 574],
    [71.4, 572],
    [71.5, 570],
    [71.6, 572],
    [71.7, 573],
    [71.8, 575],
    [71.9, 578],
    [72.0, 590],
    [72.1, 595],
    [72.2, 595],]
var elevationData_2 = [ [71.9, 578],
    [72.0, 590],
    [72.1, 595],
    [72.2, 595],
    [72.3, 579],
    [72.4, 581],
    [72.5, 583],
    [72.6, 583],
    [72.7, 583],
    [72.8, 583],
    [72.9, 580],
    [73.0, 579],
    [73.1, 584],
    [73.2, 587],
    [73.3, 594],
    [73.4, 597],
    [73.5, 597],
    [73.6, 596],]

// Now create the chart
var chart = Highcharts.chart('container', {

    chart: {
        type: 'area',
        zoomType: 'x',
        panning: true,
        panKey: 'shift',
        scrollablePlotArea: {
            minWidth: 600
        }
    },



    xAxis: {
        labels: {
            format: '{value} km'
        },
        minRange: 5,
        title: {
            text: 'Distance'
        },

    },

    yAxis: {
        startOnTick: true,
        endOnTick: false,
        maxPadding: 0.35,
        title: {
            text: null
        },
        labels: {
            format: '{value} m'
        }
    },


    series: [{

        lineColor: Highcharts.getOptions().colors[1],
        color: Highcharts.getOptions().colors[2],
        fillOpacity: 0.5,
        name: 'Elevation',
        id: 'Elevation',

        marker: {
            enabled: false
        },
        threshold: null
    }]

});

  $(document).ready(function () {

        $("#btn1").click(
            function () {
               chart.get('Elevation').setData(elevationData_1)
            }            
        );
         $("#btn2").click(
            function () {
               chart.get('Elevation').setData(elevationData_2)
            }            
        );
    });
4

0 回答 0