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?

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/

  • Imagen SVG mal escalada en IE11
  • Pie, barra, línea: SVG / VML mejor que Canvas
  • d3.js Obtener leyenda fuera del gráfico
  • d3 agrega una image con extensión svg
  • Comparación de velocidad de las bibliotecas de creación de charts de JavaScript
  • Evento cuando dos elementos SVG tocan
  • Incrustar SVG en ReactJS
  • Usando ViewBox para cambiar el tamaño de svg dependiendo del tamaño de la window
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.