聚合全网技术文章,根据你的阅读喜好进行个性推荐
显示曲线的 div 调大一些,放到另一个 div 里,使用滚动条
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <script src="jquery.js"></script> <script src="highcharts.js"></script> <script src="exporting.js"></script> <style> #scrollArea { width: 100%; height: 400px; overflow: scroll; } </style> </head> <body> <div id="scrollArea"> <div id="container"></div> </div> <script type="text/javascript"> $(function() { var data = [ ['上海', 23.7], ['Lagos', 16.1], ['Istanbul', 14.2], ['Karachi', 14.0], ['Mumbai', 12.5], ['Moscow', 12.1], ['São Paulo', 11.8], ['Beijing', 11.7], ['Guangzhou', 11.1], ['Delhi', 11.1], ['Shenzhen', 10.5], ['Seoul', 10.4], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Mexico City', 8.9], ['Lima', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['上海', 23.7], ['Lagos', 16.1], ['Istanbul', 14.2], ['Karachi', 14.0], ['Mumbai', 12.5], ['Moscow', 12.1], ['São Paulo', 11.8], ['Beijing', 11.7], ['Guangzhou', 11.1], ['Delhi', 11.1], ['Shenzhen', 10.5], ['Seoul', 10.4], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Mexico City', 8.9], ['Lima', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ['Jakarta', 10.0], ['Kinshasa', 9.3], ['Tianjin', 9.3], ['Tokyo', 9.0], ['Cairo', 8.9], ['Dhaka', 8.9], ]; $('#container').width(data.length * 40); $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'World\'s largest cities per 2014' }, subtitle: { text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>' }, xAxis: { type: 'category', labels: { rotation: -45, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: 'Population (millions)' } }, legend: { enabled: false }, tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' }, series: [{ name: 'Population', data: data, dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', format: '{point.y:.1f}', // one decimal y: 10, // 10 pixels down from the top style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }] }); }); </script> </body> </html>
$('#container').width(data.length * 40); $('#container').highcharts({......
这里设置 chart 的大小
@公孙二狗 @杨汉新
我发现了最好的解决方法,就是给series加上marker属性就好了,谢谢你们喽
要让不显示点有没有办法???
就是一直显示直线
显示曲线的 div 调大一些,放到另一个 div 里,使用滚动条
这里设置 chart 的大小
@公孙二狗 @杨汉新
我发现了最好的解决方法,就是给series加上marker属性就好了,谢谢你们喽
要让不显示点有没有办法???
就是一直显示直线