Это для диаграммы, связанной со спортом, которую мы создаем - карты действий против цели.Это дает представление о том, где на фоне цели были сделаны снимки / сохранения.Для этого используется библиотека Apexcharts.
Теперь мой разработчик не может использовать специально разработанные изображения для графиков и просто использует круг с определенным градиентом.Изображение: Карта целей - Нет изображений
Вместо этих кругов нам требуется эти изображения, которые будут использоваться вместо них.Однако, когда один из них использовался в качестве теста, это происходит.
Для разных типов графиков у нас разные изображения.Сюжет правильный, мы просто не можем использовать изображения.
Я поделился кодом, который используется сейчас.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
</head>
<body>
<div class="prev-vis-cont goal-map-img" style="width: 50%;height: 20%; background-color: grey">
<div id="previous_goal_map"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/javascript">
var img = 'img2.jpeg';
var options = {
chart: {
height: 500,
width: 500,
type: 'scatter',
zoom: {
enabled: false
}
},
markers: {
size: 10,
},
//colors:["#fff"],
// colors: ['#76FF03'],
// fill: {
// type: 'gradient',
// opacity:0.7,
// },
fill: {
type: 'image',
opacity: 1,
image: {
src: [img, img.img, img, img, img],
width: 35,
height: 35
}
},
series: [{
name: "R Shot Wide",
data: [7.21, 5.64]
},
{
name: "R Shot Wide",
data: [0.97, 1.22]
},
{
name: "R Shot On",
data: [1.42, 3.96]
},
{
name: "R Goal",
data: [3.35, .78]
},
{
name: "R Shot Wide",
data: [4.27, 8.37]
}
],
xaxis: {
tickAmount: 8,
min: 0,
max: 8,
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
show: false
}
},
yaxis: {
tickAmount: 5,
min: 0,
max: 5,
labels: {
show: true
}
},
legend: {
show: false
},
tooltip: {
enabled: false,
x: {
show: false,
title: false,
},
y: {
formatter: function (val, index) {
return ''
},
title: {
formatter: (seriesName) => seriesName,
},
}
},
dataLabels: {
enabled: false
},
grid: {
show: false,
}
}
console.log(options);
$("#previous_goal_map").html('');
var chart = new ApexCharts(
document.querySelector("#previous_goal_map"),
options
);
chart.render();
</script>
</body>
</html>
Любая и вся помощь приветствуется.
TIA