如何在highcharts中的图表和轴之间添加空间答案

【问题标题】：How to add space between chart and axis in highcharts如何在highcharts中的图表和轴之间添加空间
【发布时间】：2018-04-08 03:29:01
【问题描述】：

我正在使用来自 hightcharts 的 hightstock。但我想用 yAxis 像图像一样在图表之间创建空间

需要创造空间：

【问题讨论】：

你的意思是输入（右上角）和烛台系列之间的空间还是烛台和下面的列之间的空间？
是的，在输入和烛台系列之间
我想到的一个想法是在数据末尾添加null 值。如果您共享的图表有一个可行的小提琴，我可以使用它来看看它的可行性。
您可以通过设置 y 参数来做到这一点。示例：jsfiddle.net/tgaa7bzh。对吗？
@mike zavarello：同样的：jsfiddle.net/tgaa7bzh/1。请帮助我

标签： highcharts highstock

【解决方案1】：

我还想在 hihghstock 图表的末尾添加空格，我在 json 中请求了 ohlc，然后将其保存在一个变量中，之后我在它的末尾推了 10 个点

var timestamp = data[data.length-1][0];

//add 10 point at the end for blank space
for(var i=0;i<=10;i++){
   var added=[timestamp+(60*i*1000),null,null,null,null];
   console.log(added);
   data.push(added);
}

时间戳中的乘法是因为我得到了 json 响应。

【讨论】：

【解决方案2】：

接下来你应该做的：

1) 为图表添加边距（例如100）

marginRight: 100

2) 添加 yAxis 的偏移量与属性 'labels' 的右对齐：

 yAxis: [{
            labels:{
            align:'right',
            x:90
            }
}]

3) 禁用 y 轴绘图线以获得更好的视图（如果需要） Look at my chart

【讨论】：

【解决方案3】：

不幸的是，所提供的解决方案都不起作用，因此发布了一个新的解决方案。请记住，此功能仅在 HighChart 中有效，在 HighStock 中无效

https://jsfiddle.net/donofclass/jmpfzkas/2/

Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
var options = {
        chart: {
            type: 'line',
            renderTo: 'container',
            marginRight: 100,
            animation: false,
            events: {
                redraw: function (values) {

                },
                load: function (evt) {
                }
            }
        },
        yAxis: [{
            height: "60%",
            lineWidth: 2,
            opposite: false
        }, {

            top: "62%",
            height: "35%",
            offset: 0,
            lineWidth: 2,
            opposite: false
        }],
        xAxis: {
            type: 'datetime',
            gridLineWidth: 1,
            dataLabels: { enabled: true }
        },
        boost: {
            //useGPUTranslations: true,
            //usePreAllocated: true
        },
        legend: {
            itemHiddenStyle: {
                color: 'white'
            },
            layout: 'horizontal',
            align: 'right',
            verticalAlign: 'top',
            floating: true,
            symbolRadius: 0,
            symbolPadding: 15
        },

        plotOptions: {
            series: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                }, dataGrouping: {
                    enabled: false,
                },

                pointWidth: 0//width of the column bars irrespective of the chart size
            }
        },

        title: {
            text: 'Live random data',
            align: 'center',
            verticalAlign: 'bottom',
            style: {
                // margin: '50px', // does not work for some reasons
                color: '#707070',
                fontSize: '12px',
                fontWeight: 'normal',
                fontStyle: 'none',
                textTransform: 'none'
            }
        },

        exporting: {
            enabled: false
        },
        rangeSelector: {
            selected: 1,
            buttonTheme: {
                visibility: 'hidden'
            }, labelStyle: {
                visibility: 'hidden'
            },
            inputEnabled: false,
        },

        series: [{
            name: 'green',
            color: 'black',
            marker: {
                enabled: false
            },

            data: (function () {
                var data = [];
                return data;
            }())
        }, {
            name: "green",
            type: 'column',
            yAxis: 1,
            color: '#2DC06A',
            visible: true,
            data: (function () {
                var data = [];
                return data;
            }())
        }, {
            name: "red",
            type: 'column',
            yAxis: 1,
            color: '#ED4944',
            visible: true,
            data: (function () {
                var data = [];
                return data;
            }())
        }]
    }
    

var chart=Highcharts.chart('container',options);
  chart.update({
  xAxis:{
  max:1523148945
  }
  })
chart.series[0].setData([[1523124945,12],[1523125945,14],[1523128945,11]],false);
chart.series[1].setData([[1523124945,122],[1523125945,142],[1523128945,11]],false);
chart.series[2].setData([[1523124945,122],[1523125945,142],[1523128945,11]],true);

<script src="https://code.highcharts.com/highcharts.js"></script>
<h1>This feature works only in highchart and not in highstocks<h1>
<div id="container" style="height: 300px"></div>

【讨论】：

【解决方案4】：

你可以试试下面的marginRight；

$(function () {

var options = {
    chart: {
        renderTo: 'container',
        marginRight: 300

    },
    navigator:{
        enabled:true
    },
    scrollbar: {
        enabled:true
    },

    rangeSelector: {
        enabled: true,
	    //selected: 1
    },  
    xAxis: {
        gridLineWidth: 1,
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: [
    {
        height: 150,
        lineWidth: 2,
        offset: 0,
        title: {
            text: 'Price',
        }
    },
    {
        top: 225,
        //lineWidth: 0,
        //min: 0,
        //max: 5,
        gridLineWidth: 0,
        offset: 0,
        height: 100,
        title: {
            text: 'Volume',
        }
    },
    ],
   
    series: [
    {
        yAxis: 0,
        name: 'Price by time',
        stack: 0,

        //data: [1, 12, 32, 43],       
        data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
		tooltip: {
			valueDecimals: 2
		},           
    },
    {
        name: 'Volume by time',
        yAxis: 1,
        stack: 0,
        data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
		tooltip: {
			valueDecimals: 2
		},  
        lineWidth: 3,
        marker: {
            enabled: false
        },

        type: 'column',
    },
    ]

};

var chart = new Highcharts.Chart(options);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>

【讨论】：

谢谢！但这并不符合我的预期。