Question

我在http://jsfiddle.net/Charissima/zo5j94qz/4/

中使用了包含两个系列的图表

是否可以禁用第二个系列的十字准线？问题是，当moise指针靠近黑色系列s2时，蓝色系列s1没有十字准线，我不需要/想要黑色系列的十字准线，而是蓝色。

        var myData = [];
        for (var i = 2; i < 10; i++) {
            myData.push([i, i + Math.random() * 3]);
        }
        var myDataLine = [];
        myDataLine.push([0,6]);
        myDataLine.push([23,6]);

        chart = $('#container').highcharts('StockChart', {
            chart : {
                zoomType: 'x',
            },
            series: [{
                name: 's1',
                data: myData,
                type: 'line'
            },{
                name: 's2',
                data: myDataLine,
                type: 'line'
            }]
        });

Answer 1

Defaulty它不是内置的，但您可以像示例一样准备自己的十字准线函数：

                    mouseOver: function () {
                        var chart = this.series.chart,
                            r = chart.renderer,
                            left = chart.plotLeft,
                            top = chart.plotTop,
                            width = chart.plotWidth,
                            height = chart.plotHeight,
                            x = this.plotX,
                            y = this.plotY;

                        if (this.series.options.enabledCrosshairs) {
                            crosshair = r.path(['M', left, top + y, 'L', left + width, top + y, 'M', left + x, top, 'L', left + x, top + height])
                                .attr({
                                'stroke-width': 1,
                                stroke: 'red'
                            })
                                .add();
                        }
                    },
                    mouseOut: function () {
                        if (crosshair.d !== UNDEFINED) crosshair.destroy();
                    }

http://jsfiddle.net/u4ha3cxw/7/

Answer 2

是的，这很可能。使用2 x-axes，其中一个启用十字准线，另一个禁用十字准线。然后指定要使用哪个轴的系列：

Highcharts.chart('container', {
  xAxis: [{
    crosshair: {
      enabled: true,
      width: 5
    }
  }, {
    crosshair: false,
    visible: false
  }],

  series: [{
      name: 'Series w/ Crosshair',
      xAxis: 0, // You could omit this, highcharts uses the first axis in array by default
      data: [99.9, 81.5, 76.4, 129.2, 144.0]
    },
    {
      name: 'Series w/o Crosshair',
      xAxis: 1,
      data: [42.1, 47.5, 150.4, 42.2, 64.0]
    }
  ]
})

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

禁用Crosshair为一系列的两个

2 个答案: