控制背景图像/图案的位置 [英] Control positioning of background image/pattern

问题描述

我的最终目标是创建一个区域范围图表，使用下面的示例背景图像，以便y轴上的给定值（例如56）始终由与图像相同的颜色/位置表示。 p>

正如您可以在下面的提琴中看到的，我可以使用highcharts创建一个区域范围图表，该图表使用任意图像填充/遮蔽范围内的区域。但是，即使这两个图表具有不同的（y轴）值，颜色也完全相同;即使它们的数值不同（301对401），图表1在6月份的峰值与图表2的颜色相同。 http://jsfiddle.net/malonso/YwuqD/1/

有关填充颜色/图案的代码：

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

是否有可能以某种方式指定背景图像应该覆盖y轴上的特定范围？

示例图像：

更新：出于某种原因，在浏览器中查看时，图表背景不再显示为渐变比铬，所以我附上了什么小提琴的外观截图如：

解决方案

当您渲染图表时，请使用以下代码： code> / ********* *************
*生成示例图表
************************ ********************************* /

var chart = new Highcharts.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：// is tack.imgur.com/dezhE.png'，
width：10，
height：300 + Math.round（testData [0] [0] / 100）* 100
}
}]

}）;

var chart2 = new Highcharts.Chart（{

图表：{
renderTo：'container2'
}，

标题：{
text：'Chart 2'
}，

xAxis：{
categories：['Jan'，'Feb'，'Mar'， 'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec']
}，
series：[{
类型：'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）到图像的高度。

（您提供的代码只有很小的变化）

区别有点微妙的

My end goal is to create an "arearange" chart that uses the sample background image below such that a given value on the y-axis (e.g. 56) is always represented by the same color/position from the image.

As you can see in the fiddle below, I am able to use highcharts to create an "arearange" chart which uses an arbitrary image to fill/shade the area within the range. However, even though the two charts have different (y-axis) values, the colors are exactly the same; the peak in June on "Chart 1" is the same color as "Chart 2" even though their values are different (301 vs 401).

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

Code pertaining to the fill color/pattern:

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

Is it possible to somehow specify that the background image should cover a specific range on the y-axis?

Sample image:

UPDATE: For some reason the chart background is no longer showing up as a gradient when viewed in a browser other than chrome, so I have attached a screenshot of what the fiddle looks like:

解决方案

When you render the charts use this:

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

});

It adds the Y axis's starting point (Math.round(testData[0][0] / 100) * 100) to the height of the image.

(There is only a minor change to the code you supplied)

The difference is kinda subtle

这篇关于控制背景图像/图案的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！