2

这是我们正在制作的与运动相关的图表 - 针对目标框架的行动图。这可以让您了解射门/扑救在球门框架内的位置。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

4

1 回答 1

0

这似乎是 ApexCharts 中的一个错误。

正如您在codepen中看到的那样，我尝试在散点图中使用图像，但图像尺寸不尊重markers.size. 因此，我将在 GitHub 上开一张票，并在修复完成并发布后更新此答案。

免责声明：我是 ApexCharts 的创建者

于 2019-03-04T11:20:54.353 回答