Grafici elevati: rimuovi spazio tra il bordo del grafico e il grafico reale

Stiamo migrando da una libreria di calcolo basata su flash (FusionCharts) a uno basato su JavaScript (HighCharts).Grafici elevati: rimuovi spazio tra il bordo del grafico e il grafico reale

Questo è ciò che i nostri attuali grafici flash sembrano Current flash charts

e questo è quello che ho finora con Highcharts. enter image description here

Come posso rimuovere lo spazio (contrassegnato da grandi frecce rosse mute) tra il bordo del grafico e i dati del grafico reale?

Ecco il mio codice: http://jsfiddle.net/ChrisMBarr/7JAcN/1/

var chart = new Highcharts.Chart({ 
     chart:{ 
      renderTo: 'container', 
      type: 'areaspline', 
      plotBorderWidth: 1, 
      spacingTop:2, 
      spacingRight:5, 
      spacingBottom:5, 
      spacingLeft:2, 
      borderWidth:1, 
      borderRadius:0, 
      borderColor:'#999' 
     }, 
     credits: { 
      enabled: false 
     }, 
     title: { 
      text: 'Total spam in the last 7 days' 
     }, 
     legend: { 
      verticalAlign: 'bottom', 
      borderWidth: 1, 
      backgroundColor: '#FFFFFF' 
     }, 
     xAxis: { 
      allowDecimals:false, 
      categories: [ 
       'Thu 2/14', 
       'Fri 2/15', 
       'Sat 2/16', 
       'Sun 2/17', 
       'Mon 2/18', 
       'Tue 2/19', 
       'Wed 2/20' 
      ], 
      labels: { 
       staggerLines: 2 
      }, 
      tickmarkPlacement: 'on', 
     }, 
     yAxis: { 
      allowDecimals:false, 
      alternateGridColor: '#F7F7F7', 
      title: { 
       text: 'Number of Emails', 
       margin:5 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       var isSpam = this.series.name === _chartOptions.series[1].name 
       return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>'; 
      } 
     }, 

     plotOptions: { 
      areaspline: { 
       fillOpacity: 0.5 
      } 
     }, 

     series: [{ 
       "name": "Total Mail", 
       "color":"#339999", 
       "data": [2,3,4,7,8,8,8] 
      },{ 
       "name": "Spam", 
       "color":"#003399", 
       "data": [2,2,4,4,4,6,8] 
     }] 
    });

fonte

2013-02-20 Chris Barr

Questo potrebbe aiutare:

xAxis: { 
    min: 0.5, max: 5.5 
...

dove max = numero di punto di dati meno 1,5

fonte

2013-02-20 23:09:07 JBar

Per spiegare il 1.5 - -1 per l'indicizzazione inizia con 0, 0.5 è l'offset su entrambi i lati di cui vuoi liberarti. – JBar

Stavo cercando di farlo e ho fatto un giochetto con la soluzione di lavoro: http://jsfiddle.net/7JAcN/2/ – Robodude

Ci sarebbe un modo per ottenere il numero 'max' a livello di codice? –

Con l'opzione "tickmarkplacement" impostato su "on" , l'opzione xAxis "startontick" potrebbe aiutarti:

xAxis: { 
    startOnTick: false, 
    tickmarkplacement:"on", 
    ...

vedere this jsfiddle, forked from the Highcharts API documentation

fonte

2013-02-20 23:24:46 marty

No, non sembra funzionare per i grafici ad area. –

@ChrisBarr Sei in grado di risolvere questo? –

@ManojSethi Vedere la risposta che ho accettato sopra. Ho fatto questa domanda più di 2 anni e mezzo fa a questo punto, quindi non ricordo le specifiche in questo momento. –

Si consiglia di utilizzare i parametri/maxPadding minPadding ma doens't lavoro con le categorie. Quindi suggerisco di rimuovere categoreis, utilizzare il valore min e tickInterval

http://jsfiddle.net/7JAcN/3/ http://api.highcharts.com/highcharts#xAxis.minPadding

xAxis: { 
     allowDecimals:false, 
     minPadding:0, 
     maxPadding:0, 
     /*categories: [ 
      'Thu 2/14', 
      'Fri 2/15', 
      'Sat 2/16', 
      'Sun 2/17', 
      'Mon 2/18', 
      'Tue 2/19', 
      'Wed 2/20' 
     ],*/ 
     labels: { 
      staggerLines: 2 
     }, 
     tickmarkPlacement: 'on', 
    },

fonte

2013-02-22 11:20:38

Ho riscontrato lo stesso problema e ho risolto il problema con minPagging e maxPadding. Grazie! –

Il modo migliore per rimuovere imbottiture è aggiungere pointPlacement: 'on'

plotOptions: { 
    areaspline: {   
     pointPlacement: 'on' 
    }  
}

fonte

2018-01-22 11:39:55 SerNeo

Grafici elevati: rimuovi spazio tra il bordo del grafico e il grafico reale

risposta

Problemi correlati