Как я могу добиться этого типа маркера в хайчартах?

Так что мне нужен этот маркер в моей серии highcharts.

скриншот

Могу ли я в любом случае добиться этого?


person Neuroloq1kk    schedule 16.08.2019    source источник
comment
Вы можете добавить собственные символы к маркерам: api.highcharts.com/highcharts/plotOptions. линия.маркер.символ   -  person Barbara Laird    schedule 17.08.2019


Ответы (2)


Да, вы можете сделать это в 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)"
        }
    }]
});
person lamtacvu    schedule 19.08.2019

Вы можете добиться этого, добавив свой собственный маркер:

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

Демонстрация:

Справочник по API:

person Wojciech Chmiel    schedule 19.08.2019