Bagaimana saya bisa mencapai penanda jenis ini di grafik tinggi?

Jadi saya membutuhkan penanda ini di seri highcharts saya.

tangkapan layar

Apakah saya bisa mencapai ini?


person Neuroloq1kk    schedule 16.08.2019    source sumber
comment
Anda dapat menambahkan simbol khusus ke penanda: api.highcharts.com/highcharts/plotOptions. garis.penanda.simbol   -  person Barbara Laird    schedule 17.08.2019


Jawaban (2)


Ya, Anda bisa melakukannya di Highcharts.

  1. Anda perlu menemukan gambar untuk penanda Anda dan mengaturnya ke data seri Anda: Setel gambar penanda
  2. Untuk menyesuaikan tooltips Anda, Anda dapat melihatnya di sini : Tooltips formatter
  3. Anda perlu menyetel seri Anda untuk menyembunyikan penanda Anda dan hanya menampilkannya saat Anda mengarahkan kursor ke atasnya: Tampilkan penanda saat mengarahkan kursor

Saya telah membuat contoh langsung di sini, semoga membantu: Contoh

<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)"
        }
    }]
});
person lamtacvu    schedule 19.08.2019

Anda dapat mencapainya dengan menambahkan penanda khusus Anda:

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);
};

Dan menggunakannya seperti itu:

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

Demo:

Referensi API:

person Wojciech Chmiel    schedule 19.08.2019