Question

我需要单独隐藏移动视图中的高级图形的图例，以便它占据屏幕的整个宽度。我尝试将类.highcharts-legend设置为使用bootstrap类hidden-xs显示无，但即使它被隐藏，图表也不占用屏幕的整个宽度，即使highcharts ng指令也是如此。我还给了id＃chart1如下

 #chart1{
    height:100%  !important;
    width:100%  !important;
}

以便图表始终占据屏幕的整个宽度

Answer 1

如果屏幕小于900像素，这将隐藏图例：

let htmlParser = new DOMParser();
//remember to escape your quotes
let htmlString = "<html><body><img src=\"1\"/><img src=\"2\"/></body></html>"; 

let htmlDoc = htmlParser.parseFromString(htmlString, "text/html"); //Node
let imgCollection = htmlDoc.getElementsByTagName("img"); //both of your <img>

类似：

  chart.legend.update({ enabled: (chart.containerWidth > 900) });

Answer 2

您可以使用responsive属性并在某些情况下隐藏图例：

responsive: {
    rules: [{
        chartOptions: {
            legend: {
                enabled: false
            }
        },
        condition: {
            maxWidth: 500
        }
    }]
}

实时演示： http://jsfiddle.net/BlackLabel/pds7aqr4/

API参考： https://api.highcharts.com/highstock/responsive

如何仅在移动视图中隐藏高级图表中的图例

2 个答案: