2
ハイチャートの折れ線グラフの最後に矢印を追加しようとしています。 Iすでにsimilar questionsを通して見てきたが、解決策が動作していないようです：あなたはdrawGraphメソッドをラップする必要があり、（色で追加）ハイチャートで線図に矢印を描くにはどうすればいいですか？
A
答えて
3
を
私が探している結果をと矢印のコードを追加します。パス方式で実現できます。
(function(H) {
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 = [];
var lastPoint = null;
var 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) {
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 {
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
})
.add(series.group);
});
}(Highcharts));
例：それは、チャート上で毎回ときに矢印を再描画するので
2
（UPDATE）
以前のソリューションは非常に応答しませんブラウザのサイズが変更されます。
- 古い例：
(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));
http://jsfiddle.net/vyfsf1ft/は、しかし、私は完全に応答性の矢印でグラフを作成する方法を発見しましたお役に立てれば。乾杯！
+1
これはIE 11以降では機能しません 変更可能 pathTag.remove（pathTag）; 〜 pathTag.parentNode.removeChild（pathTag）; – russelrillema
2
私にとって大きな助け！
上記のコードは、グラフにシリーズが1つしかない場合にのみ有効です。私はそれを複数のシリーズで動作させるためにいくつかの変更を加えました。問題は、それぞれの矢印が同じIDを持っているので、他のシリーズの以前の矢印を消して、それらが再描画が必要な古い矢印だと思ったことです。私がしたのはIDを「矢印」とシリーズ名のコンボに変更していたので、特定のシリーズの前の矢印だけが消去されていました。
(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));
// used a bit of regex to clean up the series name enough to be used as an id
var arrowName = "arrow"+this.name.replace(/\W/g,"_").toLowerCase();
// console.log("----------->arrowName:"+arrowName)
var arrowLength = 15,
arrowWidth = 7,
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) {
//replaced 'arrow' with arrowName
pathTag = document.getElementById(arrowName);
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) {
//replaced 'arrow' with arrowName
pathTag = document.getElementById(arrowName);
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: arrowName //changed from 'arrow' to arrowName to enable more than one series with an arrow
})
.add(series.group);
arrowCheck = true;
});
}(Highcharts));
0
LINTED /それは完璧に動作2つのシリーズ
http://jsfiddle.net/vyfsf1ft/18/
$(function() {
(function(H) {
var arrowCheck = false
var pathTag
H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
// Apply the original function with the original arguments,
// which are sliced off this function's arguments
var series = this
proceed.apply(series, Array.prototype.slice.call(arguments, 1))
var arrowName = 'arrow' + series.name.replace(/\W/g, '_').toLowerCase()
var arrowLength = 15
var arrowWidth = 7
var data = series.data
var len = data.length
var lastSeg = data[len - 1]
var path = []
var lastPoint = null
var nextLastPoint = null
if (lastSeg.y == 0) {
lastPoint = data[len - 2]
nextLastPoint = data[len - 1]
} else {
lastPoint = data[len - 1]
nextLastPoint = data[len - 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(arrowName)
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(arrowName)
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: arrowName,
})
.add(series.group)
arrowCheck = true
})
}(Highcharts))
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'scatter'
},
xAxis: {
min: 0,
max: 10
},
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]
]
}, {
name: 'secondary',
id: 'secondary',
data: [
[1, 0],
[5, 8]
]
}]
})
})
関連する問題
- 1. ファブリックjsを使用してキャンバスに線の矢印を描くにはどうすればよいですか？
- 2. Android - パスで矢印を正しく描くにはどうすればいいですか？
- 3. VB6の線オブジェクトに矢印を描く
- 4. どうすればgnuplotに矢印を描くことができますか？
- 5. 破線の矢印を描くには？私はこのような矢印描きたい
- 6. JavaFXの2つの点の間に矢印を描くにはどうすればいいですか？
- 7. openLayersで水平線を描くにはどうすればいいですか？
- 8. iReportに縦線を描くにはどうすればいいですか？
- 9. サブプロットに対角線を描くにはどうすればいいですか？
- 10. Javaでアスタリスクを使用して半角矢印を描くにはどうすればよいですか？
- 11. Rに3Dの矢印を描くにはどうすればよいですか？
- 12. 図のように、「イメージポインティング」矢印をスライドカルーセルに表示するにはどうすればよいですか？
- 13. 軸の長さと同じ長さの矢印を描くにはどうすればよいですか？
- 14. KonvaJS：矢印で2つの図形を接続するにはどうすればいいですか？
- 15. HTMLキャンバス - 曲線の矢印を描く
- 16. デルファイの曲線矢印を描く
- 17. コンボボックスコントロールでコンテンツと矢印の間の線を削除するにはどうすればいいですか？
- 18. java2dで矢印を描くには？
- 19. シヌソイド線グラフを描くにはどうすればよいですか？
- 20. さまざまな図形の輪郭線アニメーションを描くにはどうすればよいですか？
- 21. 線を描くにはどうしたらいいですか？
- 22. フォームに線を描画するにはどうすればいいですか？
- 23. matplotlibに破線/点線の端でマーカーを描くにはどうすればよいですか？
- 24. ハイチャート：円グラフでコネクタの先端に矢頭を追加するにはどうすればいいですか？
- 25. ハイチャートでラインラベルを取り除くにはどうすればいいですか？
- 26. d3v4の2点間にどのように矢印を描くのですか？
- 27. GUIではなく、Javaコンソールで矢印キーを検出するにはどうすればよいですか？
- 28. iPhoneに線を描画するにはどうすればよいですか？
- 29. matplotlibの図に直接矢印を描く
- 30. 主要なグリッド線の間に小さなグリッド線を描くにはどうすればよいですか？
でjmfelandの答えのバージョンをクリーンアップ。ありがとうございます –
これは、行の最後に矢印を描くようです。 矢印ポイントが最後のデータポイントにプロットされていた場合は、非常に便利ですが、より正確です（どのように優れているかなどを見てください）。 – russelrillema
新しい問題が発生しました。私は同じハイパーグラフグラフ（ナビゲーションタブで区切られた）の隣にあるグラフでこのハイチャートの矢印を同じASP.NET Webページで使用しています。すべてのJSファイルが一緒にレンダリングされていて、他のグラフ（他のタブ）からデータを更新すると、あるチャートの矢印が消えます。どのようにしてこれを解決できるのか考えてください。 –