3

I use Highcharts to visualize my data. Recently I found that when I move my mouse around the chart, part of the chart will be missing. Looks like it happens randomly and I have no idea what triggers it.

I created a jsfiddle example here with js codes below:

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>

Open it in Microsoft edge and then move the mouse around the yellow point on category '2016年'. Keep doing that for about 5 seconds, you should be able to see the issue.

I also record a video about the issue here: youtube link, any words are appreciated.

-- Update -- I tested the jsfiddle example on Microsoft Edge 40.15063.674.0, it works well. In the youtube video, the version of Edge is 41.16299.15.0, I am not sure if this is related.

NJUHOBBY
  • 850
  • 3
  • 10
  • 30
  • 1
    can you share a smaple code or the highcharts options you have for this chatrt? – Strikers Nov 24 '17 at 05:02
  • @Strikers please refer to the jsfiddle example that I just inserted into the post. Thanks! – NJUHOBBY Nov 27 '17 at 03:27
  • The demo looks different than the images you have provided and I am not able to recreate the problem using Edge. Could you provide more info or test the JSFiddle demo again? – Kacper Madej Nov 28 '17 at 11:19
  • @KacperMadej, I uploaded a youtube video about the issue and also updated the question, thanks. – NJUHOBBY Nov 28 '17 at 22:04
  • I don't have access to Edge 41 to test this. Maybe in next Edge version this will be resolved. You could report this as a bug on Highcharts github bug tracker: https://github.com/highcharts/highcharts/issues – Kacper Madej Nov 29 '17 at 14:07

0 Answers0