2012-03-01 18 views
5

Ho il seguente alte classifiche:Highcharts datalabels separati per serie

  chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'scatter', 
        zoomType: 'xy' 
       }, 
       title: { text: 'Report' }, 
       xAxis: { title: { enabled: true, text: 'Score' }, 
        startOnTick: true, endOnTick: true, showLastLabel: true, min: -10, max: 11 }, 
       yAxis: { title: { text: 'Question', align: 'left' }, min: 0, max: 27, reversed: true, categories: categories, labels: {enabled: true}}, 
       tooltip: { formatter: function() { return '' + this.x +' score'; } }, 
       legend: { 
        layout: 'vertical', 
        align: 'left', 
        verticalAlign: 'top', 
        x: 320, 
        y: 35, 
        floating: true, 
        backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF', 
        borderWidth: 1, 
        width: 200, 
        height: 200 
       }, 
       plotOptions: { 
        linewidth: 10, 
        series: { 
         shadow: true, 
         dataLabels: { 
          enabled: true, 
          align: 'center', 
          verticalAlign: 'bottom', 
          rotate: 0, 
          formatter: function() { 
           return '<b style="color:gray">' + this.point.x + '</b>'; 
          }, 
          style: { 
            color: '#000', 
            font: 'bold 18px "Trebuchet MS", Verdana, sans-serif;' 
            }, 
          x:-25, 
          y:7 
         } 
        }, 
        scatter: { 
         marker: { 
          enable: false, 
          radius: 15, 
          states: { 
           hover: { 
            enabled: true, 
            lineColor: 'rgb(100,100,100)' 
           } 
          } 
         }, 
         states: { 
          hover: { 
           marker: { 
            enabled: false 
           } 
          } 
         } 
        } 
       }, 
       series: [{ 
        id:'def', 
        name: 'def', 
        color: 'rgba(223, 83, 83, .5)', 
        data: [[10,2],[9,3],[9,4],[5,5],[6,6],[7,7],[9,8],[8,9],[9,11],[7,12],[6,13],[8,14],[7,15],[8,16],[6,18],[8,19],[9,20],[7,22],[6,23],[9,25],[9,26]] 

       }, { 
        id:'abc', 
        name: 'abc', 
        color: 'rgba(119, 152, 191, .5)', 
        data: [[6,2],[3.5,3],[7.5,4],[9,5],[3.5,6],[5,7],[9,8],[5,9],[8.5,11],[8.5,12],[8.5,13],[-1,14],[10,15],[8,16],[7.5,18],[7,19],[7,20],[5,22],[8,23],[7,25],[6.5,26]] 

       }] 
      }); 

voglio avere stili diversi per i datalabels, così abc tira verso sinistra (con il parametro x) e DEF tira verso destra.

Attualmente è impostato globalmente per entrambi.

se provo:

  chart.series[1].options.dataLabels.x=25; 
      chart.redraw() 

Non succede nulla, DATALABEL è lo stesso.

Qualche idea su come fare questo?

risposta

9

È possibile formattare le etichette dati per ogni serie come in questo esempio:

Setting series-level data label options

$(function() { 
$('#container').highcharts({ 

    chart: { 
     marginRight: 50 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, { 
      dataLabels: { 
       enabled: true, 
       align: 'left', 
       crop: false, 
       style: { 
        fontWeight: 'bold' 
       }, 
       x: 3, 
       verticalAlign: 'middle' 
      }, 
      y: 54.4 
     }] 
    }] 

}); 
}); 
+2

a jsfiddle è rotto – andrewcockerham

0

So che la sua troppo tardi per la risposta, ma può aiutare a qualcun altro.

È possibile farlo definendo il valore x dell'etichetta dati di ciascuna serie.

Ecco la JS Fiddle: - link

data: [{ 
    color: Highcharts.getOptions().colors[0], 
    y: 100, 
    name:'A', 
    yAxis: 0, 
    dataLabels: { 
    enabled: true, 
    style: { 
     fontWeight: 'bold' 
    }, 
    x: 60, 
    }, 
}, 
{ 
    ... 
} 
] 
Problemi correlati