1
! ハイチャート - シリーズのデータの1つ、ツールチップを削除するには
は私がライン
を使用して矢印を描くが、私は第二の点の削除ツールチップにしたいです。
が正確であることを、私は1つの矢印ライン
どのような方法がありますで唯一のツールチップを表示したいです?
コード:
$(function() {
(function(H) {
var arrowCheck = false,
pathTag;
H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
// Now apply the original function with the original arguments,
// which are sliced off this function's arguments
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var arrowLength = 15,
arrowWidth = 9,
series = this,
data = series.data,
len = data.length,
segments = data,
lastSeg = segments[segments.length - 1],
path = [],
lastPoint = null,
nextLastPoint = null;
if (lastSeg.y == 0) {
lastPoint = segments[segments.length - 2];
nextLastPoint = segments[segments.length - 1];
} else {
lastPoint = segments[segments.length - 1];
nextLastPoint = segments[segments.length - 2];
}
var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX)/
(lastPoint.plotY - nextLastPoint.plotY));
if (angle < 0) angle = Math.PI + angle;
path.push('M', lastPoint.plotX, lastPoint.plotY);
if (lastPoint.plotX > nextLastPoint.plotX) {
if (arrowCheck === true) {
pathTag = document.getElementById("arrow");
if (pathTag != null) {
pathTag.remove(pathTag);
}
}
path.push(
'L',
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX + arrowLength * Math.sin(angle),
lastPoint.plotY + arrowLength * Math.cos(angle)
);
path.push(
lastPoint.plotX - arrowWidth * Math.cos(angle),
lastPoint.plotY + arrowWidth * Math.sin(angle),
'Z'
);
} else {
if (arrowCheck === true) {
pathTag = document.getElementById("arrow");
if (pathTag != null) {
pathTag.remove(pathTag);
}
}
path.push(
'L',
lastPoint.plotX - arrowWidth * Math.cos(angle),
lastPoint.plotY + arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX - arrowLength * Math.sin(angle),
lastPoint.plotY - arrowLength * Math.cos(angle)
);
path.push(
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle),
'Z'
);
}
series.chart.renderer.path(path)
.attr({
fill: series.color,
id: 'arrow'
})
.add(series.group);
arrowCheck = true;
});
}(Highcharts));
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'scatter'
},
xAxis:{
min: 0,
max: 5
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2,
marker: {
enabled: false
}
},
states: {
hover: {
enabled: true,
lineWidth: 2
},
}
},
series: [{
name: 'main',
id: 'main',
data: [
[0, 0],
[3,4]
]
}]
});
});
コード:http://jsfiddle.net/vyfsf1ft/3/ –
追加のプロパティを持つツールチップに表示したくないポイントを定義します。 showTooltipをfalseに設定します。ツールヒントフォーマッタで、そのプロパティをチェックすることができます。それに応じて - ツールヒントを表示するかどうか - 例を参照してください。http://jsfiddle.net/vyfsf1ft/14/ – morganfree
@morganfree問題を解決できました。 –