我想缩小图表界面。目前我使用的图表尺寸为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
有人可以指导我如何解决这个问题吗？
答案 0 :(得分：0)
检查responsive并相应地设置规则。 对于100乘100，您应该删除所有网格线，信用，标签，标题
示例
Highcharts.chart('container', {
chart: {
type: 'line',
width: 100,
height: 100
},
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: {
useHTML: true,
text: ''
},
subtitle: {
text: null
},
tooltip: {
enabled: false,
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#container').highcharts().renderer.text('mini Highcharts', 20, 90)
.css({
fontSize: '8px',
color: '#7d7d7d'
})
.add();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
使用chart.setSize();
<强>更新
您可以使用$(elem).highcharts().setSize(100, 100);
Updated小提琴