Highcharts的示例之一就是这个JSFiddle演示,它提供了一个插件,该插件允许FontAwesome图标呈现为图表上的点。
我正在尝试将相同的内容合并到我正在处理的项目中,但是当我在图表中添加一个点时(通过手动更改data
个体内的对象series
或通过调用系列的addPoint
方法),该点不会出现。但是,轴确实会更新。
在这个JSFiddle示例中,我已经在顶部添加了插件,为图表提供了一些基本的默认选项来填充轴,然后尝试添加一些点。这是此示例中的相关代码:
// Generate the event series if undefined
if (typeof eventChartOptions.options.series == 'undefined')
eventChartOptions.options.series = [];
// Populate the event series based on data in events object
eventChartOptions.options.series.push(
{
data: [[174.0, 65.6]],
marker: {
symbol: 'text:\uf183' // fa-male
},
icon: '\uf183',
name: 'Male',
color: 'rgba(119, 152, 191, 0.6)'
}
);
eventChart = new Highcharts.Chart(eventChartOptions.options);
在呈现的图表上,yAxis被更新为包括新值(为174),但是该图标无处可见:
在Highcharts自己的示例和我的代码之间进行一些比较,发现我的系列缺少一个Graphic对象:
points: Array[35]
0: Ea
category: 161.2
clientX: 222.50362775079438
graphic: G
added: true
element: text
parentGroup: G
parentInverted: undefined
renderer: ta
stroke: "#FFFFFF"
stroke-width: 0
styles: Object
textStr: ""
textWidth: undefined
xSetter: function (a,b,c){var d=c.getElementsByTagName("tspan"),
__proto__: Object
negative: false
options: Object
x: 161.2
y: 51.6
__proto__: Object
plotX: 222.50362775079438
plotY: 179.77142857142854
pointAttr: Array[0]
series: c
x: 161.2
y: 51.6
yBottom: null
__proto__: Object
points: Array[1]
0: Ea
category: 174
clientX: 112.5
negative: false
options: Object
x: 174
y: 65.6
__proto__: Object
plotX: 112.5
plotY: 275339.2173783309
pointAttr: Array[0]
series: c
x: 174
y: 65.6
yBottom: null
__proto__: Object
length: 1
__proto__: Array[0]
我在这里做错了什么?
我认为您尝试放置图标的x轴的数据不正确。
您一直在使用
// Populate the event series based on data in events object
eventChartOptions.options.series.push(
{
data: [[174.0, 65.6]] ,
marker: {
symbol: 'text:\uf183' // fa-male
},
icon: '\uf183',
name: 'Male',
color: 'rgba(119, 152, 191, 0.6)'
}
);
其表示其值与65.4
为其他轴定义的范围相去甚远,例如1390219200000
更改为
// Populate the event series based on data in events object
eventChartOptions.options.series.push({
data: [
[174.0, 1390219200000]
],
marker: {
symbol: 'text:\uf183' // fa-male
},
icon: '\uf183',
name: 'Male',
color: 'rgba(119, 152, 191, 0.6)'
});
即使在90度下也渲染该人吗?
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句