移动鼠标

Question

我使用Highcharts来可视化我的数据。最近我发现当我在图表上移动鼠标时，图表的一部分将会丢失。看起来它是随机发生的，我不知道是什么触发它。

我使用以下js代码创建了jsfiddle example here：

Highcharts.chart('container', {

  credits: {
    enabled: false
  },
  title: {
    text: "资产结构"
  },
  tooltip: {
    enabled: true,
    shared: true
  },
  xAxis: [{
    categories: ['2014年', '2015年', '2016年', '2017年半年度'],
    crosshair: true
  }],
  yAxis: [{
    title: {
      text: "金额(万元)",
      style: {
        color: "#33C4FF"
      }
    },
    labels: {
      format: "{value:,.0f}",
      style: {
        color: "#33C4FF"
      }
    },
    opposite: false
  }, {
    title: {
      text: "比率(倍)",
      style: {
        color: "#99FF33"
      }
    },
    labels: {
      format: "{value}",
      style: {
        color: "#99FF33"
      }
    },
    opposite: true
  }],
  plotOptions: {
    area: {
      stacking: 'normal'
    },
    series: {
      shadow: true
    }
  },
  legend: {
    enabled: true,
    backgroundColor: Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'
  },

  series: [{
    name: "流动资产",
    yAxis: 0,
    data: [{
      color: "#33C4FF",
      y: -0.01,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: "资产总额",
      SharedTooltipExtraValue: "1.69"
    }, {
      color: "#33C4FF",
      y: 0.81,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: "资产总额",
      SharedTooltipExtraValue: "306329.90"
    }, {
      color: "#33C4FF",
      y: 0.01,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: "资产总额",
      SharedTooltipExtraValue: "390056.33"
    }, {
      color: "#33C4FF",
      y: 0.07,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: "资产总额",
      SharedTooltipExtraValue: "0.09"
    }],
    type: "area",
    color: "#33C4FF",
    marker: {
      symbol: "circle"
    }
  }, {
    name: "非流动资产",
    yAxis: 0,
    data: [{
      color: "#FFE333",
      y: 1.68,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#FFE333",
      y: 306329.79,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#FFE333",
      y: 390056.32,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#FFE333",
      y: 0.02,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }],
    type: "area",
    color: "#FFE333",
    marker: {
      symbol: "circle"
    }
  }, {
    name: "流动比率",
    yAxis: 1,
    data: [{
      color: "#99FF33",
      y: -4.03,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#99FF33",
      y: 23.44,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#99FF33",
      y: 0,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#99FF33",
      y: 1.19,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }],
    type: "spline",
    color: "#99FF33",
    marker: {
      symbol: "circle"
    }
  }, {
    name: "速动比率",
    yAxis: 1,
    data: [{
      color: "#33FFC4",
      y: -6.32,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#33FFC4",
      y: 23.25,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#33FFC4",
      y: 0,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }, {
      color: "#33FFC4",
      y: 1.06,
      Label: null,
      radius: null,
      innerRadius: null,
      SharedTooltipExtraName: null,
      SharedTooltipExtraValue: null
    }],
    type: "spline",
    color: "#33FFC4",
    marker: {
      symbol: "circle"
    }
  }]

});

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>
<div id="container"></div>

在Microsoft边缘打开它，然后将鼠标移动到“2016年”类别的黄点周围。继续这样做大约5秒钟，您应该能够看到问题。

我还在这里录制了一个关于这个问题的视频：youtube link，任何词语都值得赞赏。

- 更新 - 我测试了Microsoft Edge 40.15063.674.0上的jsfiddle示例，它运行良好。在youtube视频中，Edge的版本是41.16299.15.0，我不确定这是否相关。