Highcharts十字准线与轴上的标签 [英] Highcharts crosshair with labels on axes

问题描述

是否有可能制作highcharts十字线，以便在单独的标签上显示轴上的实际值？

API中的常规crosshair示例不会执行此操作。如果我设置了

 工具提示：{
 crosshairs：[true，true] 
} 
  

，它不符合我的需要。
我需要图表如下所示：

解决方案

这只是一般的想法： http://jsfiddle.net/r7fdh/ - 如果光标位于图的内部，则需要添加检查（使用 chart.plot [Left / Top /宽度/高度] ），您可能需要使用 event.page [X / Y] 以外的其他位置。

代码：

  $（＃container）。mousemove（move）; 
 
 var chart = new Highcharts.Chart（{
 
图：{
 renderTo：'container'
}，
 series：[ {
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}] 
 
}）; 
 
函数move（event）{
 var x = event.pageX，
y = event.pageY，
 path = ['M'，chart.plotLeft，y ，
'L'，chart.plotLeft + chart.plotWidth，y，
'M'，x，chart.plotTop，
'L'，x，chart.plotTop + chart.plotHeight ]。 
 
 if（chart.crossLines）{
 //更新行
 chart.crossLines.attr（{
 d：path 
}）; 
} else {
 //绘制线条
 chart.crossLines = chart.renderer.path（path）.attr（{
'stroke-width'：2，
 stroke：'green'，
 zIndex：10 
}）。add（）; 
 
 
 if（chart.crossLabel）{
 //更新标签
 chart.crossLabel.attr（{
y：y + 6，
 text：chart.yAxis [0] .toValue（y）.toFixed（2）
}）; 
} else {
 //绘制标签
 chart.crossLabel = chart.renderer.text（chart.yAxis [0] .toValue（y）.toFixed（2），chart.plotLeft  - 40，y + 6）.add（）; 
} 
} 
  

Is it possible to make highcharts crosshair that vill show actual value on the axis in the separate label?

Regular crosshair example out from API doesnt do this. If I set

tooltip: {
        crosshairs: [true, true]
    }

, it doesnt do what I need. I need chart to look like this:

解决方案

It's just general idea: http://jsfiddle.net/r7fdh/ - you need to add checking if cursor is inside plot (use chart.plot[Left/Top/Width/Height]) and you may need to use something else than event.page[X/Y] for getting position.

Code:

$("#container").mousemove(move);

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },
    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]
    }]

});

function move(event) {
    var x = event.pageX,
        y = event.pageY,
        path = ['M', chart.plotLeft, y,
            'L', chart.plotLeft + chart.plotWidth, y,
            'M', x, chart.plotTop,
            'L', x, chart.plotTop + chart.plotHeight];

    if (chart.crossLines) {
        // update lines
        chart.crossLines.attr({
            d: path
        });
    } else {
        // draw lines
        chart.crossLines = chart.renderer.path(path).attr({
            'stroke-width': 2,
            stroke: 'green',
            zIndex: 10
        }).add();
    }

    if (chart.crossLabel) {
        // update label
        chart.crossLabel.attr({
            y: y + 6,
            text: chart.yAxis[0].toValue(y).toFixed(2)
        });
    } else {
        // draw label
        chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 40, y + 6).add();
    }
}

这篇关于Highcharts十字准线与轴上的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！