0
マイゲージハイチャートの上隅に画像を追加しようとしています。しかし、私はここで間違っているのか分からない。画像を追加できないようです。ここに私のコードです。画像が表示されず、コンソールにエラーはありません。私はここで間違っていますか？誰もこれで私を助けることができますか？ありがとう。ハイチャートに画像を追加
var gaugeOptions = {
chart: {
type: 'solidgauge',
borderWidth: 1,
borderColor: '#6d6e71',
style: {
"width": "100%",
"height": "auto"
},
height:300,
spacingBottom:50,
},
title: {
title: 'Gauge',
style: {
"color": "#5c5d5f",
"fontSize": "18px",
"width": "100%",
"fontWeight": "500",
"fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif",
},
},
pane: {
center: ['50%', '95%'],
size: '180%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
// the value axis
yAxis: {
minColor: arr_chart_divs[2],
maxColor: arr_chart_divs[2],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16,
style: {
"color": "#5c5d5f",
"fontSize": "18px",
"fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif",
}
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 0,
borderWidth: 0,
useHTML: true
}
}
}
};
$(arr_chart_divs[0]).html('');
// common gauge
$(arr_chart_divs[0]).highcharts(Highcharts.merge(gaugeOptions, {
title: {
'text': arr_chart_divs[1]
},
yAxis: { //add16a
min: 0,
max: data[1],
tickPositioner: function() {
return [0, data[1]]
},
stops: [
[0.1, arr_chart_divs[2]],
[0.5, arr_chart_divs[2]],
[0.9, arr_chart_divs[2]]
],
},
series: [{
name: arr_chart_divs[1],
data: [data[0]],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:,.0f}</span><br/>' +'</div>'
},
}]
}, function (chart) { // on complete
var imageWidth = 30,
imageHeight = 30,
x = chart.plotLeft + (chart.plotWidth/2) - (imageWidth/2),
y = chart.plotTop;
chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', x,y, imageWidth, imageHeight).attr({
zIndex:1
}).add();
}));
イベントの画像をゲージオプションで追加しようとしました。しかし、これもうまくいきません。何かエラーはありません！
var gaugeOptions = {
chart: {
type: 'solidgauge',
borderWidth: 1,
borderColor: '#6d6e71',
style: {
"width": "100%",
"height": "auto"
},
height:300,
spacingBottom:50,
},
events: {
load: function() {
this.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 70, 10, 28, 28).attr({
zIndex: 9999
}).add();
}
},
title: {
title: 'Gauge',
style: {
"color": "#5c5d5f",
"fontSize": "18px",
"width": "100%",
"fontWeight": "500",
"fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif",
},
},
pane: {
center: ['50%', '95%'],
size: '180%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
// the value axis
yAxis: {
minColor: arr_chart_divs[2],
maxColor: arr_chart_divs[2],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16,
style: {
"color": "#5c5d5f",
"fontSize": "18px",
"fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif",
}
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 0,
borderWidth: 0,
useHTML: true
}
}
}
};
$(arr_chart_divs[0]).highcharts(Highcharts.merge(gaugeOptions, {
title: {
'text': arr_chart_divs[1]
},
yAxis: {
min: 0,
max: data[1],
tickPositioner: function() {
return [0, data[1]]
},
stops: [
[0.1, arr_chart_divs[2]],
[0.5, arr_chart_divs[2]],
[0.9, arr_chart_divs[2]]
],
},
series: [{
name: arr_chart_divs[1],
data: [data[0]],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:,.0f}</span><br/>' +'</div>'
},
}]
}));