0
ハイチャートでリセットズームボタンを常に非表示にする方法。ズームインとズームアウトのためのカスタムボタンがあります。ハイチャートでリセットズームボタンを常に非表示にする方法。私はズームインとズームアウトのためのカスタムボタンを持っています。ハイチャートのリセットズームボタンを常に隠す方法。私はズームインとズームアウトのためのカスタムボタンを持っています。ハイチャートのリセットズームボタンを常に隠す方法。ズームインとズームアウトのためのカスタムボタンがあります。 $(関数(){それがページで利用可能なすべてのスペースを利用できるようにHighchartsプラグインは、チャートの *バウンディングボックスの外側別の容器にツールチップを表示する*/** 。 */ハイチャート - リセットズームボタンを常に非表示にする
(function(H) {
H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) {
var chart = this.chart,
options = this.options,
chartRenderer = chart.renderer,
box;
if (!this.label) {
this.renderer = new H.Renderer(document.body, 400, 500);
box = this.renderer.boxWrapper;
box.css({
position: 'absolute',
top: '-9999px'
});
chart.renderer = this.renderer;
proceed.call(this, chart, options);
chart.renderer = chartRenderer;
this.label.attr({
x: 0,
y: 0
});
this.label.xSetter = function(value) {
box.element.style.left = value + 'px';
};
this.label.ySetter = function(value) {
box.element.style.top = value + 'px';
};
}
return this.label;
});
H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
var chart = this.chart,
chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
pos;
point.plotX += this.chart.pointer.chartPosition.left;
point.plotY += this.chart.pointer.chartPosition.top;
// Temporary set the chart size to the full document, so that the tooltip positioner picks it up
chart.chartWidth = $(document).width();
chart.chartHeight = $(document).height();
// Compute the tooltip position
pos = proceed.call(this, boxWidth, boxHeight, point);
// Reset chart size
chart.chartWidth = chartWidth;
chart.chartHeight = chartHeight;
return pos;
});
/**
* Find the new position and perform the move. This override is identical
* to the core function, except the anchorX and anchorY arguments to move().
*/
H.Tooltip.prototype.updatePosition = function(point) {
var chart = this.chart,
label = this.label,
pos = (this.options.positioner || this.getPosition).call(
this,
label.width,
label.height,
point
);
// do the move
this.move(
Math.round(pos.x),
Math.round(pos.y || 0), // can be undefined (#3977)
point.plotX + chart.plotLeft - pos.x,
point.plotY + chart.plotTop - pos.y
);
};
}(Highcharts));
let data = [{
values: [
1.0,
0.0
],
name: "#1"
}, {
values: [
0.0, -1.0
],
name: "#2"
}, {
values: [
0.0,
0.0
],
name: "#3"
}, {
values: [-1.0,
0.0
],
name: "#4"
}, {
values: [
0.0,
0.0
],
name: "#5"
}];
let chart = Highcharts.chart('container', {
chart: {
type: 'line',
height: 45,
style: {
overflow: 'visible'
}
},
xAxis: {
minPadding: 0.000,
maxPadding: 0.000,
startOnTick: false,
endOnTick: false,
tickWidth: 0,
gridLineWidth: 0,
lineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
}
},
yAxis: {
minPadding: 0.001,
maxPadding: 0.001,
gridLineWidth: 0,
lineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
}
},
lang: {
noData: 'No data'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
tooltip: {
shared: true
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
data: []
}]
});
data.forEach((seriesData) => {
chart.addSeries({
name: seriesData.name,
data: seriesData.values
});
});
});
は、これは私がまさに探していたものですので、多くのHalvorありがとう!! – Martin
もう1つ質問があります。可能であれば、助けてください。カスタムズームアウトボタンをクリックするとzoomOut()を呼び出すことができます。しかし、カスタムボタンのズームをクリックしたときにzoom()を呼び出すと、そのボタンは機能しません。ハイチャートのソースコードで定義されているzoom()が見えました。この機能に関する私の理解は間違っていますか?参考にしてください – Martin
'zoom'関数は、マウスイベントを受け取り、そのプロパティを使ってズームする場所を決定します。ズームする場所を何とか指定する必要があります。例については、[この小さな例](http://jsfiddle.net/owLb9q8t/1/)を参照してください。しかし、詳細については別の質問をします。 –