Vị trí điều khiển của hình nền/mẫu

Question

Mục tiêu cuối cùng của tôi là tạo biểu đồ "khu vực" sử dụng hình nền mẫu bên dưới sao cho giá trị đã cho trên trục y (ví dụ 56) luôn được biểu thị bằng cùng một màu/vị trí từ hình ảnh.

Như bạn có thể thấy trong phần dưới đây, tôi có thể sử dụng vạch cao để tạo biểu đồ "khu vực" sử dụng hình ảnh tùy ý để lấp đầy/che khu vực trong phạm vi. Tuy nhiên, mặc dù hai biểu đồ có giá trị khác nhau (y-axis), nhưng màu sắc chính xác giống nhau; đỉnh vào tháng 6 trên "Biểu đồ 1" có cùng màu với "Biểu đồ 2" mặc dù giá trị của chúng khác nhau (301 so với 401).

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

Mã liên quan đến việc lấp đầy màu/mẫu:

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

Có thể bằng cách nào đó chỉ ra rằng hình nền nên bao gồm một phạm vi cụ thể trên trục y?

ảnh

mẫu:

UPDATE: Đối với một số lý do nền biểu đồ không còn được hiển thị như một gradient khi xem trong một trình duyệt khác ngoài chrome, vì vậy tôi có kèm theo một ảnh chụp màn hình về những gì fiddle trông giống như:

Answer 1

Khi bạn làm cho các biểu đồ sử dụng này:

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

}); 

Nó thêm điểm khởi đầu trục của Y (Math.round (TestData [0] [0]/100) * 100) với chiều cao của hình ảnh.

(Chỉ có một thay đổi nhỏ vào mã bạn cung cấp)

Sự khác biệt là kinda tinh tế

Answer 2

Bạn cũng có thể cố gắng cập nhật vị trí của hình ảnh sau khi biểu đồ được trả lại. Chỉ giới hạn là phải biết một điểm (ví dụ: pixel thứ nhất trên đầu mẫu phải là giá trị 500). Xem ví dụ: http://jsfiddle.net/YwuqD/9/

Đầu tiên thêm tài liệu tham khảo cho bản cập nhật trong tương lai khi tạo mẫu:

this.upgradeGradients = image; 

Sau đó, sử dụng tải này:

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