Highcharts muestra series.name en X Axis

Estoy tratando de mostrar el nombre de cada serie en X-Axis http://jsfiddle.net/Jr79Y/9/ enter image description here

series: [{ name: 'Test', data: [20] }, { name: 'Test', data: [20] }, { name: 'Test', data: [40] }] 

¿Alguien sabe cómo hacer esto?

  • Establecer la capa className dentro de la callback de evento en Leaflet
  • Sintaxis para la transición de ejes en svg / d3
  • Agregar una línea horizontal al gráfico d3 muestra el valor incorrecto
  • Seleccionar un elemento por su atributo cuando tiene dos puntos en su nombre
  • HTML5 svg drag and drop - ¿cómo?
  • dagre-d3 ¿Solución IE para SVG elemento foreignObject?
  • Múltiples charts de disposition de fuerza con d3 en diferentes svg / div's
  • React.js: animaciones sin CSS
  • 4 Solutions collect form web for “Highcharts muestra series.name en X Axis”

    Esta es una solución mucho más simple que todo lo que estoy viendo para respuestas hasta ahora:

      xAxis: { categories:[] } 

    .

     series: [{ data: [{name:'Test 1',y:20,color:'networking'}, {name:'Test 2',y:20,color:'blue'}, {name:'Test 3',y:40,color:'green'}] }] 

    Ejemplo:

    Aunque a less que tengas una muy buena razón para que cada barra sea de un color diferente, por lo general solo agrega un desorder visual innecesario y será mejor que dejes un solo color.

    http://jsfiddle.net/Jr79Y/35/

     xAxis: { categories: ['Test1', 'Test2', 'Test3'] } 

    Para la serie, esto es bastante sucio, pero funciona:

     series: [{ name: 'Test1', data: [20, 0, 0] }, { name: 'Test2', data: [0, 20, 0] }, { name: 'Test3', data: [0, 0, 40] } 

    Prueba esto:

     xAxis: { categories: ['Test', 'Test', 'Test'], title: { text: null, } }, 

    Y en la parte de serie:

     series: [{ name: 'Values', data: [20,20,40] },] 

    Referencia .

    EDITADO:

    Está utilizando tres grupos, por lo que debe modificar su formatting de datos. Si quieres un color diferente, testing esto:

     series: [{ name: 'Values', data: [20,0,0] }, { name: 'Values', data: [0,20,0] }, { name: 'Values', data: [0,0,40] },] 

    Mira esto

     $(function () { $('#container').highcharts({ chart: { type: 'bar' }, xAxis: { categories:['Test 1', 'Test 2', 'Test3'] }, plotOptions: { series: { dataLabels: { enabled: true, } //colorByPoint: true }, series: { colorByPoint: true } }, legend: { layout: 'vertical', floating: true, backgroundColor: '#FFFFFF', align: 'right', verticalAlign: 'top', y: 60, x: -60 }, series: [{ data: [40,20,20] }] }); }); 

    http://jsfiddle.net/Jr79Y/36/

    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.