Мне нужна диаграмма с использованием высоких графиков с пользовательским маркером. Я реализовал и который работает нормально. Но при экспорте моего графика в JPEG пользовательский маркер не отображается.
Я пытался удалить события при загрузке в функции экспорта, но маркер по-прежнему не отображается. Как этого добиться?
Пожалуйста, найдите мою ссылку на скрипку здесь Ссылка на скрипку
var test = Highcharts.chart('container', {
chart: {
style: {
fontFamily: "FuturaPTCond",
fontSize: "16px"
},
type: "solidgauge",
events: {
load: function() {
var elementSVG;
var chart = this,
counter = 0,
drawCircle = setInterval(function() {
if (++counter >= 1000) {
clearInterval(drawCircle);
}
renderCircle(chart);
function renderCircle(chart) {
let chartData = chart.userOptions.series[0].data[0];
let color =
chartData < -21
? "#DC143C"
: chartData >= -21 && chartData < 21
? "#FF4500"
: chartData >= 21 && chartData < 51
? "#FFFF00"
: chartData >= 51 && chartData < 71
? "#00BFFF"
: chartData >= 71 && chartData < 91
? "#ADFF2F"
: "#FF1493";
var series = chart.series[0],
pathDivided = series.points[0].graphic.attr("d").split(" "),
pathElemArr = [];
pathDivided.forEach(function(el, inx) {
if (el === "L") {
pathElemArr.push(parseFloat(pathDivided[inx + 1]));
pathElemArr.push(parseFloat(pathDivided[inx + 2]));
}
});
if (elementSVG) {
elementSVG.destroy();
}
document.getElementById(
"BackgroundColor"
).style.backgroundColor = "#fff";
elementSVG = chart.renderer
.circle(pathElemArr[0] + 11.25, pathElemArr[1], 10)
.attr({
fill: "#fff",
stroke: color,
width: "30px",
"stroke-width": 8,
zIndex: 10,
startAngle: -90,
endAngle: 90,
transform: 'translate(0 10)'
})
.add();
}
}, 1);
$(".highcharts-axis-title").attr("x", 600.5);
$(".highcharts-axis-title").attr("y", 395.25);
$(".highcharts-credits").attr("x", 725);
},
redraw: function() {
$(".highcharts-axis-title").attr("x", 600.5);
$(".highcharts-axis-title").attr("y", 395.25);
$(".highcharts-credits").attr("x", 725);
}
}
},
title: null,
pane: {
center: ["50%", "85%"],
size: "98%",
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: "#ffff",
innerRadius: "0%",
outerRadius: "0%"
},
shape: "arc"
},
// the value axis
yAxis: {
lineWidth: 0,
tickWidth: 0,
min: -100,
max: 100,
title: {
text: "<p style='font-size: 20px; font-weight: bold'>Last 30 Days</p>",
style: {
color: "grey"
}
},
tickPositions: [-100, -20, 20, 50, 70, 90, 100],
minorTickInterval: 0,
tickAmount: 0,
plotBands: [
{
from: -100,
to: -22,
borderWidth: 5,
borderColor: "#DC143C",
color: "#DC143C",
outerRadius: "92.5%"
},
{
from: -18,
to: 18,
borderWidth: 5,
borderColor: "#FF4500",
color: "#FF4500",
outerRadius: "92.5%"
},
{
from: 22,
to: 48,
borderWidth: 5,
borderColor: "#FFFF00",
color: "#FFFF00",
outerRadius: "92.5%"
},
{
from: 52,
to: 68,
borderWidth: 5,
borderColor: "#00BFFF",
color: "#00BFFF",
outerRadius: "92.5%"
},
{
from: 72,
to: 88,
borderWidth: 5,
borderColor: "#ADFF2F",
color: "#ADFF2F",
outerRadius: "92.5%"
},
{
from: 92,
to: 100,
borderWidth: 5,
borderColor: "#FF1493",
color: "#FF1493",
outerRadius: "92.5%"
}
],
labels: {
enabled: true,
distance: 10,
rotation: 0,
format: "<span style='fill:#00000; font-size: 16px'>{value}</span>"
}
},
plotOptions: {
solidgauge: {
borderColor: "#009CE8",
borderWidth: 0,
radius: 90,
innerRadius: "89%",
dataLabels: {
enabled: true,
y: 5,
borderWidth: 0,
useHTML: true,
format:
'<div id="BackgroundColor" style="Width: 50px;text-align:center"><span style="font-size:70px;color: #000000; margin-left: -20px">{y}</span></div>'
}
}
},
series: [
{
name: "Speed",
data: [-10],
animation: {
duration: 1500
}
}
],
exporting: {
type: 'image/jpeg',
filename: 'test',
allowHTML: true,
enabled: false,
chartOptions: {
title: {
text: "Test"
},
chart:{
events:null
}
}
}
});
$("#export").click(function(){
test.exportChart();
});