Posizionamento di controllo dell'immagine/pattern di sfondo

Question

Il mio obiettivo finale è creare un grafico "arearange" che utilizzi l'immagine di sfondo del campione di seguito in modo che un determinato valore sull'asse y (ad esempio 56) sia sempre rappresentato dallo stesso colore/posizione dall'immagine.

Come potete vedere nel violino qui sotto, sono in grado di utilizzare i diagrammi elevati per creare un grafico "arearange" che utilizza un'immagine arbitraria per riempire/ombreggiare l'area all'interno dell'intervallo. Tuttavia, anche se i due grafici hanno valori diversi (asse y), i colori sono esattamente gli stessi; il picco a giugno su "Grafico 1" è dello stesso colore di "Grafico 2" anche se i loro valori sono diversi (301 vs 401).

http://jsfiddle.net/malonso/YwuqD/1/

Codice in materia di colore di riempimento/modello:

fillColor: { 
     pattern: 'http://i.stack.imgur.com/dezhE.png', 
     width: 10, 
     height: 300 
    } 

E 'possibile specificare in qualche modo che l'immagine di sfondo dovrebbe coprire una gamma specifica sulla asse y?

immagine

Esempio:

UPDATE: Per qualche motivo lo sfondo del grafico non è più rivelando come un gradiente quando visualizzato in un browser diverso da Chrome, così ho attaccato uno screenshot di ciò che il violino assomiglia:

Answer 1

Quando si esegue il rendering delle classifiche usano questo:

/********************************************************* 
* Generate the example chart 
*********************************************************/ 

var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container' 
    }, 

    title: { 
     text: 'Chart 1' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    series: [{ 
     type: 'arearange', 
     data: testData, 
     fillColor: { 
      pattern: 'http://i.stack.imgur.com/dezhE.png', 
      width: 10, 
      height: 300 + Math.round(testData[0][0]/100) * 100 
     } 
    }] 

}); 

var chart2 = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container2' 
    }, 

    title: { 
     text: 'Chart 2' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    series: [{ 
     type: 'arearange', 
     data: testData2, 
     fillColor: { 
      pattern: 'http://i.stack.imgur.com/dezhE.png', 
      width: 10, 
      height: 300 + Math.round(testData2[0][0]/100) * 100 
     } 
    }] 

}); 

Si aggiunge punto iniziale del all'asse Y (Math.round (testdata [0] [0]/100) * 100) all'altezza dell'immagine.

(c'è solo una piccola modifica al codice che hai fornito)

La differenza è kinda sottile

Answer 2

Si può anche provare ad aggiornare la posizione dell'immagine dopo grafico viene reso. Unico limite è conoscere un punto (ad esempio, il primo pixel in cima al modello deve avere valore 500). Vedi l'esempio: http://jsfiddle.net/YwuqD/9/

aggiungere prima di riferimento per l'aggiornamento futuro, quando la creazione di modello:

this.upgradeGradients = image; 

allora in uso carico questo:

 load: function() { 
      var chart = this, 
       image = chart.renderer.upgradeGradients, 
       top = chart.yAxis[0].toPixels(500), //500 is the top of image - only for example value 
       diff = chart.plotTop + top; 

      image.attr({y : diff}); 
     }