使Highcharts.js图表​​在移动和桌面上看起来很好

tim*_*son 13 javascript jquery svg highcharts responsive-design

我想知道是否有人使用Highcharts成功实现了响应式设计,使他们的图表在移动设备和桌面上都看起来很好.

默认情况下,当您调整浏览器屏幕大小时,Highcharts会重新缩放,只是X轴被刻度线文本弄得乱七八糟,条形图看起来很高,太瘦(太压缩).要了解我的意思,您可以转到此页面并调整浏览器的大小.

我认为这些问题可以通过将数据点数量减少到原始数量的1/3来解决,尽管我想知道如何使用Highcharts的API以编程方式完成.如果这听起来不是一个好主意,我也会对其他想法或解决方案感兴趣,人们可能会想到在移动设备上使用Highcharts(或者甚至是不同的JS图表库,其中多设备解决方案可能更容易实现?).

tim*_*son 18

解决方案似乎相当简单.

只是不要给图形一个固定的宽度,即不要定义宽度或设置width:100%,与我提到的演示不同,条形图宽度和伴随条将缩小浏览器宽度减少.