Sterowanie pozycjonowaniem obrazu/wzoru tła

Question

Moim celem końcowym jest utworzenie wykresu "arearange", który wykorzystuje przykładowy obraz tła poniżej, tak aby dana wartość na osi Y (np. 56) była zawsze reprezentowana przez ten sam kolor/pozycja z obrazu.

Jak widać na skrzypcach poniżej, mogę używać wykresów wysokiej jakości do tworzenia wykresu "arearange", który wykorzystuje dowolny obraz do wypełnienia/przyciemnienia obszaru w obrębie zakresu. Jednak pomimo tego, że oba wykresy mają różne wartości (oś Y), kolory są dokładnie takie same; szczyt w czerwcu na "Wykresie 1" jest tego samego koloru co "Wykres 2", mimo że ich wartości są różne (301 vs 401).

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

Kod odnoszący się do koloru wypełnienia/wzór:

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

Czy można jakoś określić, że obraz tła powinien obejmować określony zakres na osi y?

Przykładowy obraz:

UPDATE: Z jakiegoś powodu tło wykres nie pokazuje się jako gradient widzianego w przeglądarce innej niż Chrome, więc załączam zrzut ekranu, co skrzypce wygląda następująco:

Answer 1

Podczas renderowania wykresy użyć tego:

/********************************************************* 
* 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 
     } 
    }] 

}); 

Dodaje punkt początkowy Osi Y (Math.round (testdata [0] [0]/100) * 100) do wysokości obrazu.

(Jest tylko drobne zmiany w kodzie dostarczonym)

Różnica jest dosyć subtelna

Answer 2

Można także spróbować zaktualizować położenia obrazu po wykres jest renderowany. Jedynym ograniczeniem jest znajomość jednego punktu (na przykład pierwszy piksel na górze wzoru powinien mieć wartość 500). Patrz przykład: http://jsfiddle.net/YwuqD/9/

Pierwszy dodać odniesienie do przyszłej aktualizacji podczas tworzenia wzoru:

this.upgradeGradients = image; 

Następnie w użyciu obciążenia to:

 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}); 
     }