ฉันจะใช้เครื่องหมายประเภทนี้ใน Highchart ได้อย่างไร

ใช่ คุณสามารถทำได้ใน Highcharts

1. คุณต้องค้นหารูปภาพสำหรับมาร์กเกอร์ของคุณและตั้งค่าให้เป็นข้อมูลซีรีส์ของคุณ: ตั้งค่ารูปภาพมาร์กเกอร์
2. หากต้องการปรับแต่งคำแนะนำเครื่องมือ คุณสามารถดูได้ที่นี่ : ตัวจัดรูปแบบคำแนะนำเครื่องมือ
3. คุณต้องตั้งค่าซีรีส์ของคุณซ่อนเครื่องหมายของคุณและแสดงเฉพาะเมื่อคุณวางเมาส์ไว้บนนั้น : แสดงเครื่องหมายเมื่อวางเมาส์เหนือ

ฉันได้สร้างตัวอย่างสดไว้ที่นี่ หวังว่าจะช่วยได้: ตัวอย่าง

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
     chart: {
         backgroundColor: "#000"
     },
     tooltip: {
         positioner: function(boxWidth, boxHeight, point) {         
             return {
                 x:point.plotX + boxWidth / 2 ,
                 y:point.plotY + boxHeight / 2 + 20
             };         
         },
        formatter: function () {
            return ' <b>' + this.x + '</b>';
        },
        borderColor: '#14aaa0',
        backgroundColor: '#14aaa0',
        borderRadius: 9,
        style: {
            color: '#fff'
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        marker: {
            symbol: "url(https://i.imgur.com/akecE8I.png)"
        }
    }]
});

คุณสามารถทำได้โดยการเพิ่มเครื่องหมายที่คุณกำหนดเอง:

Highcharts.SVGRenderer.prototype.symbols.custom = function(x, y, width, height) {
  var w = width / 2,
    h = height / 2,
    space = 1.5,
    inner, outer;

  inner = this.arc(x + w, y + h, w - space * 2, h - space * 2, {
    start: Math.PI * 0.5,
    end: Math.PI * 2.5,
    open: false
  });

  outer = this.arc(x + w, y + h, w - space, h - space, {
    start: Math.PI * 0.5,
    end: Math.PI * 2.5,
    innerR: w,
    open: false
  });

  return outer.concat(inner);
};

และใช้มันเช่นนั้น:

plotOptions: {
  series: {
    marker: {
      symbol: 'custom',
      radius: 7
    }
  }
}

สาธิต:

• https://jsfiddle.net/BlackLabel/n4u3196f/

การอ้างอิง API:

• https://api.highcharts.com/highcharts/series.line.marker.Symbol