HighCharts Custom SVG Маркер Символ

Question

На основе документации Highcharts вы можете создать свой собственный маркер точки, определив пользовательский обратный вызов для пути символа (на основе SVG).

Однако, что если вам нужно получить данные базовых серий из функции прототипа символа? Это возможно?

Например:

Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {

    // I want to be able to access the series data from here. 
    // Either the point data or the entire series' data array.
           
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};

if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}


Highcharts.chart('container', {

    title: {
        text: 'Demo of predefined, image and custom marker symbols'
    },

    legend: {
        y: -40 // make room for subtitle
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        name: 'Custom symbol',
        data: [54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6],
        marker: {
            symbol: 'cross',
            lineColor: null,
            lineWidth: 2
        }
    }],

    credits: {
        enabled: false
    },

    subtitle: {
        text: '*) Base64 not supported in IE6 and IE7',
        verticalAlign: 'bottom',
        align: 'right',
        y: null,
        style: {
            fontSize: '10px'
        }
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

Answer 1

Оказывается, вы можете определить свойства маркера на уровне отдельных точек. Оттуда вы можете предоставить значение и сделать его доступным из пользовательского обратного вызова.

Вроде так:

Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h, d) {

  // I want to be able to access the series data from here. 
  // Either the point data or the entire series' data array.
  if (d.v) {
    console.debug("Point-specific data: " + d.v);
  }

  // From here, you can imagine one can use the point-specific data to affect the symbol path. 
  // A good example would be to in case you want to build a series of custom wind barbs, 
  // in which the path of the barb will be based on the intensity and direction of each point 
  // ...

  return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};

if (Highcharts.VMLRenderer) {
  Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}


Highcharts.chart('container', {

  title: {
    text: 'Demo of predefined, image and custom marker symbols'
  },

  xAxis: {
    type: 'datetime'
  },

  series: [{
    name: 'Custom symbol',
    data: [{
        x: 1525089600000,
        y: 54.4,
        marker: {
          symbol: "cross",
          v: 54.4
        }
      },

      {
        x: 1525090500000,
        y: 71.5,
        marker: {
          symbol: "cross",
          v: 71.5
        }
      },

      {
        x: 1525091400000,
        y: 29.9,
        marker: {
          symbol: "cross",
          v: 29.9
        }
      }

    ],
    marker: {
      symbol: 'cross',
      lineColor: null,
      lineWidth: 2
    }
  }],


});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>