javascript - 在 highcharts 中添加趋势线时图表宽度会发生变化

标签 javascript highcharts trendline

我面临着一个严重的问题。每当我尝试添加从图表稍下方开始到顶部(大约 70-85 度 Angular )的任何趋势线时,它都会改变其宽度。但在垂直和水平线的情况下,我不会遇到问题。有什么办法可以防止这种情况发生吗?

我的代码是:

$(function() {
            $.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
        // create the chart
        var onadata =[];
        var yData=[];       
        var type='line';            
        var datalen=data.candles.length;
        var all_points= [];
        var all_str="";

        for(var i=0; i<datalen;i++)
        {
            var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
            onadata.push(each);
            yData.push(data.candles[i].closeMid);
        }

        chart();

        function chart()
        {
            $('#container').highcharts('StockChart', {

                    credits: {
                        enabled : 0
                    },

                    rangeSelector : {
                        buttons: [{
                            type: 'month',
                            count: 1,
                            text: '1M'
                        }, {
                            type: 'month',
                            count: 3,
                            text: '3M'
                        },{
                            type: 'month',
                            count: 6,
                            text: '6M'
                        },{
                            type: 'all',
                            text: 'All'
                        }], 
                        selected:3      
                    },

                    legend: {
                        enabled: true,
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },

                    title : {
                        text : 'Stock Price'
                    },

                    xAxis :{
                        minRange : 3600000
                    },

                    chart: {
                        events: {
                            click: function(event) {                                
                                var x1=event.xAxis[0].value;
                                var x2 =this.xAxis[0].toPixels(x1);             
                                var y1=event.yAxis[0].value;
                                var y2 =this.yAxis[0].toPixels(y1);

                                selected_point='['+x1+','+y1+']';                             
                                all_points.push(selected_point);
                                all_str=all_points.toString();                               
                                if(all_points.length>1)
                                {

                                    this.addSeries({                            
                                    type : 'line',
                                    name : 'Trendline',
                                    id: 'trend',    
                                    data: JSON.parse("[" + all_str + "]"),                      
                                    color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
                                    marker:{enabled:true}
                                    });

                                }

                                if(all_points.length==2)
                                {
                                    all_points=[];
                                }


                            }

                        }       
                    },

                    series : [{
                        //allowPointSelect : true,
                        type : type,
                        name : 'Stock Price',
                        id: 'primary',
                        data : onadata,
                        tooltip: {
                            valueDecimals: 5,
                            crosshairs: true,
                            shared: true
                        },
                        dataGrouping : {

                            units : [
                                [
                                    'hour',
                                    [1, 2, 3, 4, 6, 8, 12]
                                ], [
                                    'day',
                                    [1]
                                ], [
                                    'week',
                                    [1]
                                ], [
                                    'month',
                                    [1, 3, 6]
                                ], [
                                    'year',
                                    [1]
                                ]
                            ]
                        }
                    },
                    ]
                });
        }


    });
});

这是我的 JSfiddle .

另请检查图像。

  1. 普通图表 enter image description here

  2. 带有趋势线的图表 enter image description here

最佳答案

这是正常的。它正在调整图表的高度(而不是宽度)以适应您要添加的点。它添加了一点缓冲区,使图表点更具可读性。

关于javascript - 在 highcharts 中添加趋势线时图表宽度会发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24075803/

相关文章:

Highcharts堆积列如何在每个类别上使用不同的标签

PHP像excel TREND函数一样计算趋势线

javascript - JavaScript 中相当于 Java 的 ByteArrayOutputStream 的是什么?

javascript - 如何为全局变量构建 JavaScript/HTML 网站?

javascript - jquery:禁用/启用按钮在重置后不起作用

javascript - Highcharts 在单行中渲染折线图

javascript - 使用 colorByPoint 时如何设置系列的图例符号颜色?

python - 带有趋势线的散点图

javascript - 如何在 JavaScript 中计算 r 平方值

javascript - ruby 和 javascript 之间的字符串编码长度不匹配