Управление позиционированием фонового изображения/рисунка

Question

Моя конечная цель - создать диаграмму «Arearange», которая использует фоновое изображение образца ниже, так что заданное значение по оси y (например, 56) всегда представлено одним и тем же цветом/позиция из изображения.

Как вы можете видеть на скрипке ниже, я могу использовать высокопроизводительные диаграммы для создания диаграммы «Arearange», которая использует произвольное изображение для заполнения/изменения области в пределах диапазона. Однако, несмотря на то, что две диаграммы имеют разные значения (по оси Y), цвета точно совпадают; пик в июне на «Диаграмме 1» имеет тот же цвет, что и «Диаграмма 2», хотя их значения различны (301 против 401).

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

код, относящийся к цвет заливки/шаблон:

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

Можно ли каким-то образом указать, что фоновое изображение должно охватывать определенный диапазон по оси ординат?

Пример изображения:

UPDATE: не почему-то фон диаграммы больше не отображается как градиент, если смотреть в браузере, кроме хрома, поэтому я приложил скриншот того, что скрипку выглядит следующим образом:

Answer 1

При визуализации графики используют это:

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

}); 

Это добавляет начальную точку оси Y. (в Math.round (TestData [0] [0]/100) * 100) на высоту изображения.

(Существует лишь незначительные изменения в код, который вы поставки)

Разница в том, своего рода тонкий

Answer 2

Вы также можете попробовать обновить положение изображения после того, как график визуализации. Только ограничение - знать одну точку (например, 1-й пиксель поверх рисунка должен быть для значения 500). Смотрите пример: http://jsfiddle.net/YwuqD/9/

Сначала добавьте ссылку для будущего обновления при создании шаблона:

this.upgradeGradients = image; 

Тогда при использовании нагрузки это:

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