Highcharts - 在单个值上显示标记图标
Highcharts - Display Marker Icon on Single Value
希望在我的 Highcharts 图表上创建单个标记,预期结果应如下所示 - http://jsfiddle.net/m1mqv4z2/
{
x: Date.UTC(2014, 6, 31)
y: 26.5,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
},
我正在寻找要显示在此图表上的上述图标 - http://jsfiddle.net/wkaLs9ub/3/。因此,出于示例目的,我想将太阳图标设置为该图表的中间值。
我尝试过的方法如上面的代码片段所示,此代码嵌套在数据中,如第一个 fiddle 所示,但我没有成功。这在 Highcharts 的功能中是否可行?
正如您所指出的,您需要为您的观点设置 marker.symbol
。在您的数据中,它看起来像这样:
data: [
[Date.UTC(2014, 6, 31), 0.8446],
{ x: Date.UTC(2014, 8, 18), y: 0.736, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } },
[Date.UTC(2014, 7, 01), 0.8283],
// ...
]
你的明细图的数据依赖于这段代码,它填充了detailData
数组:
$.each(masterChart.series[0].data, function () {
if (this.x >= detailStart) {
detailData.push([this.x, this.y]);
}
});
这里你还需要传过来marker.symbol
的详细信息。您还需要包括 enabled: true
,因为图表已将其作为一个整体禁用。您可以像这样更新这段代码:
$.each(masterChart.series[0].data, function () {
if (this.x >= detailStart) {
// If it has a symbol, include that information
if(this.marker && this.marker.symbol)
detailData.push({x: this.x, y: this.y, marker: { enabled: true, symbol: this.marker.symbol }});
// Else, just include x and y
else
detailData.push([this.x, this.y]);
}
});
查看 this updated JSFiddle 其工作原理。
希望在我的 Highcharts 图表上创建单个标记,预期结果应如下所示 - http://jsfiddle.net/m1mqv4z2/
{
x: Date.UTC(2014, 6, 31)
y: 26.5,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
},
我正在寻找要显示在此图表上的上述图标 - http://jsfiddle.net/wkaLs9ub/3/。因此,出于示例目的,我想将太阳图标设置为该图表的中间值。
我尝试过的方法如上面的代码片段所示,此代码嵌套在数据中,如第一个 fiddle 所示,但我没有成功。这在 Highcharts 的功能中是否可行?
正如您所指出的,您需要为您的观点设置 marker.symbol
。在您的数据中,它看起来像这样:
data: [
[Date.UTC(2014, 6, 31), 0.8446],
{ x: Date.UTC(2014, 8, 18), y: 0.736, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } },
[Date.UTC(2014, 7, 01), 0.8283],
// ...
]
你的明细图的数据依赖于这段代码,它填充了detailData
数组:
$.each(masterChart.series[0].data, function () {
if (this.x >= detailStart) {
detailData.push([this.x, this.y]);
}
});
这里你还需要传过来marker.symbol
的详细信息。您还需要包括 enabled: true
,因为图表已将其作为一个整体禁用。您可以像这样更新这段代码:
$.each(masterChart.series[0].data, function () {
if (this.x >= detailStart) {
// If it has a symbol, include that information
if(this.marker && this.marker.symbol)
detailData.push({x: this.x, y: this.y, marker: { enabled: true, symbol: this.marker.symbol }});
// Else, just include x and y
else
detailData.push([this.x, this.y]);
}
});
查看 this updated JSFiddle 其工作原理。