问题描述
这是针对我们正在制作的与体育相关的图表-针对目标框架的行动图。 这给出了关于在目标框内进行射击/保存的位置的想法。 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
1楼
这似乎是ApexCharts中的错误。
我尝试在散点图中使用图像，如在看到的 ，但是图像尺寸不符合markers.size 。
因此，我将在GitHub上打开一个票证，并在修复程序完成并发布后更新此答案。
免责声明：我是ApexCharts的创建者