[英]Responsive Highchart legend position
您可以在創建圖表之前使用窗口寬度,並使用該信息設置圖例的對齊方式。 例如( JSFiddle ):
var isBig = $(window).width() > 700;
var legendBig = {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
};
var legendSmall = {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
$('#container').highcharts({
legend: isBig? legendBig : legendSmall,
// ...
});
這是一則舊文章,但是自從我碰到它后,很可能其他人會在某個時候。 我發現,從Highcharts 5開始,您可以配置響應行為的選項: https : //www.highcharts.com/docs/chart-concepts/sensitive ,所以這是現在要走的路。
這是我用來達到這種效果的配置:
{
chart: {
type: 'pie',
},
legend: {
layout: 'vertical',
squareSymbol: false,
symbolRadius: 0,
},
plotOptions: {
pie:
showInLegend: true,
},
},
responsive: {
rules: [{
condition: {
minWidth: 700,
},
chartOptions: {
legend: {
align: 'right',
verticalAlign: 'top',
}
}
}]
},
}
因為您要的是響應式布局,所以我做了一些小提琴,它會監聽resize事件並相應地更改圖例屬性。
不知道它是否會很好地工作(圖例可能需要在每個位置進行一些調整),但是其實質如下:
$(function () {
$(document).ready(function () {
$(window).resize(function () {
var chart = $('#container').highcharts();
var isBig = chart.chartWidth > 450;
console.log(chart.chartWidth);
if (isBig) {
chart.legend.options.align = "right";
chart.legend.options.verticalAlign = "middle";
chart.legend.options.layout = "vertical";
chart.isDirtyLegend = true;
} else {
chart.legend.options.align = "center";
chart.legend.options.verticalAlign = "bottom";
chart.legend.options.layout = "horizontal";
chart.isDirtyLegend = true;
}
});
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
$(window).trigger("resize");
});
});
每次調整大小時,都會檢查圖表寬度,如果寬度小於閾值,則圖例會更改位置屬性。
重繪圖表時(容器縮小時會重繪),將正確繪制圖例。
小提琴示例: https : //jsfiddle.net/9xfL6rz1/2/
您可以使用CSS媒體查詢。 您可以定義屏幕的最小寬度和最大寬度。
例如,如果僅在屏幕小於320px時需要向元素添加樣式,則可以使用以下屬性:
@media only screen and (max-width : 320px) {
/* Styles */
}
這是我創建了一個小樣的小提琴的地方: https : //jsfiddle.net/valentinho14/mkr2bgww/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.