Nightingale rose chart, also known as cockscomb chart and polar coordinate region chart, transforms the column chart into a more beautiful pie chart form. It is a polar coordinate column chart, which magnifies the visual effect of differences between data and is suitable for comparing data with small differences. When drawing a Nightingale rose chart in ECharts, the parameters are similar to the standard pie chart, but a special parameter for the Nightingale rose chart is the roseType, called the Nightingale Rose chart mode, and two values can be used: “radius” and “area.” When the radius mode is used, the value of each item is taken as the radius of the sector. In general, the radius mode may cause great distortion. When the area mode is used, the value of each item is taken as the area of the sector. In general, the distortion of the area mode is small.

The number of students and professors in a secondary college of a university is shown in the table.

Nightingale rose chart is drawn according to the number of students and professors in a secondary college of a university, as shown in the figure.

Despite their ubiquitous use in data visualizations, many users have labeled roses as “flashy.” Like many charts, the rose chart has some drawbacks. Note the following for the use of the rose chart. (1) Suitable for displaying data of many categories. By stacking, rose charts can show a lot of data. For too few categories of data, it is out of place, recommended to use a standard pie chart. (2) The numerical difference of classified data displayed should not be too large. In a rose chart, classifications with large numerical differences would be difficult to observe and the overall chart would be incongruous. Bar charts are recommended in this case.

(3) Sort the data. If you need to compare the size of data, you can process the data in ascending or descending order in advance to avoid accurate comparison of data with many data categories or small data differences. Adding numeric labels to the data is another solution, but it is difficult to achieve good results when there is a large amount of data. Sometimes for the “top-heavy” “not too coordinated” rose chart, you can also manually set the order of data, make the chart more beautiful. The effect of the rose chart varies greatly depending on the data sequence. (4) Be careful with cascading rose charts. The problem with the stacked rose diagram is that the stacked data start at different positions, and if the difference is not large, it is difficult to compare directly.

Source code is as follows:

<html> <head> <meta charset="utf-8"> <! - introduce ECharts script -- > < script SRC = "js/ECharts js" > < / script > < / head > < body > <! <div id="main" style="width: 800px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {title: {text: 'Secondary college distribution - Nightingale rose ', x: 'center', // set the main title all center backgroundColor: '#B5A642', // set the background color of the main title to yellow textStyle: {// set the main title fontSize: 18, // set the main title fontSize: 18, // set the main title fontSize: "black ", // set the main title font color: Trigger: 'item', // Set the formatter: "{a} <br/>{b} : {c} ({d} %) "}, legend: {/ / configuration legend component x: 'center', y: 'bottom' data: [' computer ', 'big data', 'foreign language', 'robots',' construction ', 'mechanical', 'art' and 'business']}, toolbox: {/ / configuration tool box components show: true, x: 600, / / setting toolkit level y: 18, // Set vertical position of toolbox feature: {mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['pie', 'funnel'] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, series: Name: 'Number of students (radius mode)', type: 'pie', // Nightingale rose chart belongs to one of the radius charts: ['10%', '50%'], // Set the radius center: ['50%', 180], // set the center roseType: 'radius', // Set the Nightingale rose chart parameters: radius mode // For funnel plot Max: 40, // for funnel plot itemStyle: {normal: {label: {show: false}, labelLine: {show: false } }, emphasis: { label: { show: true }, labelLine: { show: true } } }, data: [ { value: 2000, name: 'computer'}, {value: 1500, name: 'big data'}, {value: 1200, name: 'foreign language'}, {value: 1100, name: 'robot'}, {value: 1000, name: 'big data'}, {value: 1200, name: 'foreign language'}, {value: 1100, name: 'robot'}, {value: 1000, name: 'construction'}, {value: 900, name: 'mechanical'}, {value: 800, name: 'art'}, {value: 700, name: 'finance'}]}, {// Set the second data series and format name: 'the number of students (area), type:' pie ', / / nightingale rose belongs to a radius of the pie chart: [' 10% ', '50%'], / / set the radius center: [' 50% ', 180], / / set the center of the circle roseType: // For funnel plot Max: 40, // for funnel plot sort: 'Ascending ', // for funnel plot data: [{value: 2000, name:' computer '}, {value: 1500, name: 'big data'}, {value: 1200, name: 'foreign language'}, {value: 1100, name: 'robot'}, {value: 1000, name: 'robot'}, {value: 900, name: 'mechanical'}, {value: 800, name: 'robot'}, {value: 900, name: 'mechanical'}, {value: 800, name: 'Art'}, {value: 700, name: 'finance'}]}, {// Set the 3rd data series and format name: 'number of professors (area mode)', type: 'pie', // Nightingale rose chart belongs to a kind of pie chart radius: ] [' 10% ', '50%', / / set the radius center: [' 50% ', 420], / / set the center of the circle roseType: 'area', / / set the nightingale rose diagram parameters: the area of pattern x: // for funnel plot Max: 40, // for funnel plot sort: 'Ascending ', // for funnel plot data: [{value: 25, name: 'computer'}, {value: 15, name: 'big data'}, {value: 12, name: 'foreign language'}, {value: 10, name: 'robot'}, {value: 8, name: 'construction'}, {value: 7, name: 'mechanical'}, {value: 6, name: 'art'}, {value: 4, name: 'finance'}]}}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code