未定义点击事件的工具提示中的XAxis类别?

时间:2017-08-26 13:46:22

标签: javascript jquery css highcharts

[问题是点击x轴从0,1得到..我需要鼠标上的OnClick事件上的x轴类别值在x轴上正确到达但是点击x轴即将到来的价值观]

jsfiddle.net/f25rzxmu/1 /

on the left of image you can see the x-axis value

1 个答案:

答案 0 :(得分:0)

试用此代码

您可以通过设置this.x来获取x轴类别值  到this.category

.attr({ text: 'x: ' + this.category + ' y: ' + this.y + ' field: ' + this.series.name })



Highcharts.chart('container', {
title: {
    text: 'Mouse click demo'
},
subtitle: {
    text: 'On point click or mouse out, the values should be reported in top left'
},
xAxis: {
		categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
		crosshair: 'true'
	},
plotOptions: {
    series: {
        
        point: {
            events: {
               click: function () {
                    var chart = this.series.chart;
                    debugger;
                    if (!chart.lbl) {
                        chart.lbl = chart.renderer.label('')
                            .attr({
                                padding: 10,
                                r: 10,
                                fill: Highcharts.getOptions().colors[1]
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();
                    }
                    chart.lbl
                        .show()
                        .attr({
                          text: 'x: ' + this.category + ' y: ' + this.y + ' field: ' + this.series.name
                        });
                }
            }
        },
        events: {
            mouseOut: function () {
                if (this.chart.lbl) {
                    this.chart.lbl.hide();
                }
            }
        }
    }
},

tooltip: {
    enabled: true
},


series: [{
		name: "Tokyo",
		data: [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
	}, {
		name: "New York",
		data: [83.6, 78.8, 98.5, 93.4, 106, 84.5, 105, 104.3, 91.2, 83.5, 106.6, 92.3]
	}, {
		name: "London",
		data: [48.9, 38.8, 39.3, 41.4, 47, 48.3, 59, 59.6, 52.4, 65.2, 59.3, 51.2]
	}, {
		name: "Berlin",
		data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
	}]
});

#reporting {
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666;
    background: white;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>
&#13;
&#13;
&#13;