Highcharts 如何在图形上绘制不连续的直线?
我试着在我的图表上画一些直线,并且已经得到了大部分的方法,但是现在我被偏移卡住了。下面的红线应该在两个标记之间画一条线,但正如你所看到的,它们是高的和左的 我原以为Highcharts 如何在图形上绘制不连续的直线?,highcharts,highstock,Highcharts,Highstock,我试着在我的图表上画一些直线,并且已经得到了大部分的方法,但是现在我被偏移卡住了。下面的红线应该在两个标记之间画一条线,但正如你所看到的,它们是高的和左的 我原以为plotX和plotY会帮我解决这个问题,但我遗漏了一些东西。图表中有四个系列:绿色、蓝色、红色三角形和红色三角形。我想画一条线连接红色三角形(第三系列)和红色三角形向下(第四系列)。我目前正在通过一个回调来实现这一点,它在系列3上循环,并使用plotX和plotY添加路径 现在看起来是这样的,但我对更好的方法持开放态度 f
plotX
和plotY
会帮我解决这个问题,但我遗漏了一些东西。图表中有四个系列:绿色、蓝色、红色三角形和红色三角形。我想画一条线连接红色三角形(第三系列)和红色三角形向下(第四系列)。我目前正在通过一个回调来实现这一点,它在系列3上循环,并使用plotX和plotY添加路径
现在看起来是这样的,但我对更好的方法持开放态度
function(){
var chart = this;
$.each(chart.series[2].data, function(index, value){
startX = chart.series[2].data[index].plotX;
startY = chart.series[2].data[index].plotY;
endX = chart.series[3].data[index].plotX
endY = chart.series[3].data[index].plotY
chart.renderer.path(['M', startX, startY, 'L', endX, endY])
.attr({ 'stroke-width': 2, stroke: 'red' })
.add();
console.log(index, startX, startY, endX, endY);
})
});
轴和其他一切看起来像:
$(document).ready(function () {
chart1 = new Highcharts.StockChart({
chart:{
renderTo:'container'
},
yAxis:[
{ // Leader yAxis
labels:{
formatter:function () { return "$" + this.value.toFixed(2); },
style:{ color:'green' }
},
title:{
text:'Leader',
style:{ color:'green' }
}
},
{ // Follower yAxis
title:{
text:'Follower',
style:{ color:'#4572A7' }
},
labels:{
formatter: function () { return "$" + this.value.toFixed(2); },
style: { color:'#4572A7' }
},
opposite: true
}],
series:[
{
type: 'line',
name: 'Buyer Moving Average',
data: buyer,
color: 'green',
yAxis: 1
},{
type:'line',
name:'Data',
data: equity,
color: "#4572A7",
yAxis: 0
},{
type: 'scatter',
name: 'Buys',
data: buys,
color: 'red',
marker: { symbol: "triangle" },
yAxis: 0
},{
type:'scatter',
name:'Sells',
data: [{{ sells }}],
color: 'red',
marker: { symbol: "triangle-down" },
yAxis: 0
}
]
有趣的是,被迫把一个问题变成一个问题,帮助我理顺了自己的思想和挫折,为自己找到了答案 plotX和plotY属性不考虑轴引入的标签和其他内容,因此只需找到它们创建的偏移并将其添加到:
function(){
var chart = this;
xoffset = chart.series[2].xAxis.left;
yoffset = chart.series[2].xAxis.top;
$.each(chart.series[2].data, function(index, value){
startX = chart.series[2].data[index].plotX + xoffset;
startY = chart.series[2].data[index].plotY + yoffset;
endX = chart.series[3].data[index].plotX + xoffset;
endY = chart.series[3].data[index].plotY + yoffset;
chart.renderer.path(['M', startX, startY, 'L', endX, endY])
.attr({ 'stroke-width': 2, stroke: 'red' })
.add();
console.log(index, chart.series[2].xAxis.left, startX, startY, endX, endY);
}