Highcharts plus d'une série

Question

j'ai un simple document JSON:

[ { 
    "x" : "a", 
    "y" : 2 
}, { 
    "x" : "b", 
    "y" : 8 
}, { 
    "x" : "c", 
    "y" : 4 
}, { 
    "x" : "d", 
    "y" : 15 
} ] 

Je veux le visualiser en utilisant Highcharts ayant 4 séries. Je pourrais réussir, cependant, les données sont apparues seulement comme une série (voir la figure suivante).

Voici une partie du code:

var options = { 
. 
. 
. 
series: [{ }] 
}; 

. 
. 
. 
var data = JSON.parse(json); 

var seriesData = []; 
for (var i = 0; i < data.length; i++) { 
    seriesData.push([data[i].x, data[i].y]); 
    options.xAxis.categories.push(data[i].x); 
} 

    options.series[0].data = seriesData; 
    var chart = new Highcharts.Chart(options); 

mise à jour également la série

chart.series[0].update({ 
       type: type, 
      }); 

fonctionne très bien.

utilisant

options.series.push({name: data[i].x, data: [data[i].x, data[i].y]}); 

crée 4 séries, mais pas de façon appropriée et la mise à jour a également visualisé la série

chart.series[0].update({ 
      type: type, 
     }); 

ne fonctionne pas, par conséquent, je veux me concentrer dans la première méthode mentionnée.

des indices?

EDit: le code qui fonctionne en partie pour moi:

var options = { 
      chart: { 
       renderTo: 'container', 
       type: 'column' //default 

      }, 
      title: { 
       text: '' 
      }, 

      yAxis: { 
       title: { 
        enabled: true, 
        text: 'Count', 
        style: { 
         fontWeight: 'normal' 
        } 
       } 
      }, 

      xAxis: { 
       title: { 
        enabled: true, 
        text: '', 
        style: { 
         fontWeight: 'normal' 
        } 
       }, 
       categories: [], 
       crosshair: true 
      } , 

      plotOptions: { 
       pie: { 
        innerSize: 125, 
        depth: 80 
       }, 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0, 
        grouping: false 
       } 

      }, 
      series: [{ }] 
     }; 


// Set type 
$.each(['column', 'pie'], function (i, type) { 
    $('#' + type).click(function() { 


    chart.series[0].update({ 
        type: type 
     }); 

}); 



var data = get the data fom json file** 

var seriesData = []; 
for (var i = 0; i < data.length; i++) { 
    seriesData.push([data[i].x, data[i].y]); 
    options.xAxis.categories.push(data[i].x); 


} 

    options.series[0].data = seriesData; 
var chart = new Highcharts.Chart(options); 

    }); 

}); 

Answer 1

Vous devez décider si vous voulez avoir 4 séries différentes et mettre à jour toutes les 4 séries à la fois ou vous voulez avoir une série d'alors construire par exemple légende sur votre propre.

Si vous souhaitez avoir 4 séries, définissez le groupement sur false, définissez les catégories xAxis et chaque point doit être mappé sur une série avec un point - le point.x doit avoir l'index de la série.

const series = data.map((point, x) => ({ name: point.x, data: [{ x, y: point.y }]})) 

const chart = Highcharts.chart('container', { 
    chart: { 
    type: 'column' 
    }, 
    plotOptions: { 
    column: { 
     grouping: false 
    } 
    }, 
    xAxis: { 
    categories: data.map(point => point.x) 
    }, 
    series: series 
}); 

Ensuite, vous pouvez mettre à jour toutes les 4 séries:

chart.series.forEach(series => series.update({ 
    type: series.type === 'column' ? 'scatter' : 'column' 
    }, false)) 

    chart.redraw() 

exemple: http://jsfiddle.net/pdjqrj5y/