[Highcharts Pie Chart] When dynamically adding data to the pie chart, the drawing is "stuck"

Recently, I need to add data to the pie chart of highcharts, using the following syntax:

pieChart.addSeries({
      type:'pie',
      name: 'quantity distribution',
      data:countData
});

 Among them, pieChart is a highcharts object. The composition of countData is as follows:

var countList = data.list;//The List<Map<String, Object>> collection passed from the background obtained by ajax, the element in this collection is a map, and the key of each element is each area of ​​the corresponding pie chart The name, vlaue is the size of the value represented by each block.
//The data structure used for parsing into highcharts pie chart
var countData = [];
for(var i=0; i<countList.length; i++) {
   var tmp = countList[i];
   countData.push([tmp.key, tmp.value]);
}

 It was understandable to do so, but I found that it will redraw after the addSeries operation of pieChart: pieChart.redraw() is "stuck" here. . Couldn't find the reason for a long time.

As a result, it was discovered later that this situation does not occur every time; and the reason why it cannot be redrawn is that the data structure of the pie chart is similar to the following:

[{name1:100, name2:0, name3:0, name4:0}]

If you observe carefully, you will find that only the value corresponding to name1 is not 0, and the others are 0; when you add data dynamically, only one block has value, and the pie chart cannot be drawn or redrawn; The original meaning of the picture is not difficult to understand: the pie chart is used to show the "size division" of each block in terms of value. Of course, the value of each block is not 0 to have practical significance~~

And when you parsed the data structure as follows:

[{name1:100, name2:10, name3:0, name4:0}]

, that is, when there is not only one block whose value is not 0, but there is still a block whose value is 0, the drawing of the pie chart can be performed at this time, but the display of the pie chart will be "chaotic" (you can try it yourself).

 

Solution: Process in the background. When the value of a block is not 0, only add its corresponding map to the collection. In this way, when the pie chart is dynamically drawn, the pie chart will only display the distribution of blocks with values ​​(>0)~

However, the drawing of static pie charts does not have the above restrictions. .

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326615114&siteId=291194637