javascript - HighCharts 自定义 SVG 标记符号

Question

基于Highcharts documentation您可以通过为(基于 SVG 的)符号路径定义自定义回调来创建自己的点标记。

但是，如果您需要从符号原型(prototype)函数中获取底层序列数据怎么办？这可能吗？

例如:

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>