Estoy tratando de actualizar la serie de gráficos Sunburst en el cambio de menú desplegable. Pero la serie de datos de mi gráfico no se actualiza. En este momento, cuando intento actualizar el gráfico, solo la información sobre herramientas se actualiza. El gráfico no se está redibujando. A continuación se muestra mi código y la URL de demostración de JS fiddle: https://jsfiddle.net/n0y87osa/6/
var options = { chart: { height: '70%', // type: 'sunburst' renderTo: 'container' }, plotOptions: { sunburst: {} }, series: [{ type: "sunburst", name: 'Root', data: data, point:{ events:{ click: function (event) { alert(this.name); } } }, allowDrillToNode: true, cursor: 'pointer', dataLabels: { style: { fontSize: "12px", //color: "#515151", fontWeight: 'normal !important', fontFamily: "'Open Sans', sans-serif", textOutline : 0, color: '#fff' }, }, levels: [{ level: 1, levelIsConstant: false, dataLabels: { filter: { property: 'outerArcLength', operator: '>', value: 64 }, }, },{ level: 2, dataLabels: { rotationMode: 'parallel' } }, { level: 3, colorVariation: { key: 'brightness', to: -0.4 //Tells the gradation extent } }] }], tooltip: { shared: true, } }; var chart = new Highcharts.Chart(options); $('#type_').on('change',function(){ alert(this.value); chart.series[0].setData(data2); chart.redraw() });Problema reproducido en un ejemplo mínimo en vivo: https://jsfiddle.net/BlackLabel/qrhpsbx5/
Error en la consola: Uncaught TypeError: Cannot read properties of undefined (reading 'x')
El problema ocurre porque está utilizando incorrectamente la propiedad de index en sus datos. Highcharts también utiliza index de datos para calcular la longitud de los datos, lo que provoca incompatibilidades durante las actualizaciones de datos.
Como solución, puede cambiar el nombre de la propiedad:
var data2 = [{ id: '0.0', parent: '', name: 'KSE ALL', customIndex: 32819 }, ...]; o guárdelo en custom :
var data2 = [{ id: '0.0', parent: '', name: 'KSE ALL', custom: { index: 32819 } }, ...];Demostración en vivo: https://jsfiddle.net/BlackLabel/xnespquj/
Referencia de API: https://api.highcharts.com/highcharts/series.sunburst.data.custom
I did destroy the chart and redraw it with updated data series. var chart; function sunBurstChart (data1){ var options = { chart: { height: '70%', // type: 'sunburst' renderTo: 'container' }, series: [{ type: "sunburst", name: 'Root', data: data1, point:{ events:{ click: function (event) { alert(this.name); } } }, allowDrillToNode: true, cursor: 'pointer', dataLabels: { /** * A custom formatter that returns the name only if the inner arc * is longer than a certain pixel size, so the shape has place for * the label. */ style: { fontSize: "12px", //color: "#515151", fontWeight: 'normal !important', fontFamily: "'Open Sans', sans-serif", textOutline : 0, color: '#fff' }, }, levels: [{ level: 1, levelIsConstant: false, dataLabels: { filter: { property: 'outerArcLength', operator: '>', value: 64 }, style: { fontSize: "12px", //color: "#515151", fontWeight: 'normal !important', fontFamily: "'Open Sans', sans-serif", textShadow: false , backgroundColor: 'rgba(255, 255, 255, 1)', }, }, },{ level: 2, dataLabels: { rotationMode: 'parallel' } }, { level: 3, colorVariation: { key: 'brightness', to: -0.4 //Tells the gradation extent } }] }], chart = new Highcharts.Chart(options); } sunBurstChart(data); $('#type_').on('change',function(){ // alert(this.value); chart.destroy(); sunBurstChart(data2); chart.redraw(); });