1

私は自分のチャートにいくつかの直線をプロットしようとしており、ほとんどの方法でそこに到達しましたが、現在はオフセットにこだわっています. 下の赤い線は 2 つのマーカー間に線を引くはずですが、ご覧のとおり、左に高くなっています。

株価チャート

私はこれを整理することを期待しplotXてplotYいましたが、何かが欠けています。チャートには 4 つの系列があります: 緑、青、赤の三角形、および赤の三角形の下。赤い三角形 (3 番目のシリーズ) と赤い三角形の下 (4 番目のシリーズ) を結ぶ線を引きたいと思います。私は現在、シリーズ 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
            }
        ]
4

1 に答える 1

3

問題を質問に変えることを強いられることで、自分の考えやフラストレーションを解消し、自分で答えを見つけることができるのはおかしいです...

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);
        }
于 2012-08-16T03:33:12.307 に答える