【发布时间】：2018-03-19 03:44:14
【问题描述】：
我想缩小图表界面。目前我正在使用大小为 600 x 300 像素的图表，效果很好。
现在我想在同一个地方显示 3 个图表，以便节省空间。我想显示 3 个图表缩略图（工作图表）。如果用户单击任何图表，它应该显示为完整图表。我可以在弹出窗口中显示它或在页面本身上展开它。
我查看了 Highchart 网站。它提供了使用高度和宽度属性调整图表大小的选项。
http://api.highcharts.com/highcharts/chart.height
http://api.highcharts.com/highcharts/chart.width
此选项实际上不会调整图表的大小。字符布局变小，但标题标签保持不变。我希望图表调整大小并在较小的版本中工作，文本和图表显示在较小的框中，如 100 x 100 像素。
我可以使用chart.setSize(); 函数来调整图表大小。
这有意义吗？请指导我。
我使用的是highcharts 5.0版本的js文件。
这是我的代码：
var seriesData1 = {
name: "Series1Label",
data: Series1Data
},
seriesData2 = {
"name": "Series2Label",
"data": Series2Data
},
seriesData3 = {
"name": "Series3Label",
"data": Series3Data
},
completedData = [seriesData2, seriesData3, seriesData1];
var elem = par.find('<some class>');
elem.highcharts({
chart: {
type: 'areaspline'
},
colors: ['#21d0b8', '#2248B5', '#5B82A1'],
title: {
text: ""
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
useHTML: true,
itemDistance: 5,
},
xAxis: {
'title': {
text: xAxisTitle
},
categories: categories,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
}
}
},
areaspline: {
fillOpacity: 0.8
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: completedData,
exporting: {
buttons: {
contextButton: {
text: 'Export',
useHTML: true,
align: 'right',
symbolY: 15,
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 100
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled:false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled:false,
},
title: {
text: null
}
},
title:{
text: '',
},
subtitle: {
text: null
},
tooltip:{
enabled:false,
},
legend:{
enabled:false,
},
credits: {
enabled: false
}
}
}]
}
});
“elem”图表元素在单个页面上出现 7 次，因此我编写了一个代码来填充不同数据上的所有图表并在单个函数中触发它们。
我需要所有 7 个图表以缩略图形式显示，并在用户点击时以大尺寸显示某些图表。
在我更新代码时使用您的示例。
var getChart = ele_.highcharts({.....});
调整代码大小：
getChart.setSize(100, 100);
遇到错误
getChart.setSize is not a function
谁能指导我如何解决这个问题？
【问题讨论】：
标签： javascript highcharts