Пожалуйста, найдите мой код ниже, у меня есть детализированная диаграмма. В приведенном ниже примере у меня более 60 элементов на диаграмме... но мое значение уменьшается, и я не могу просмотреть все элементы. Я попробовал полосу прокрутки с высокой диаграммой, но она не работает. Может кто-нибудь помочь, как я могу включить прокрутку в диаграмме детализации
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script>
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
scrollbar: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Product',
y: 5,
drilldown: 'item'
}]
}],
drilldown: {
series: [{
id: 'item',
data: [
['item1', 4],
['item2', 2],
['item3', 1],
['item4', 2],
['item5', 1],
['item6', 4],
['item7', 2],
['item8', 1],
['item9', 2],
['item10', 1],
['item11', 4],
['item12', 2],
['item13', 1],
['item14', 2],
['item15', 1],
['item16', 4],
['item17', 2],
['item18', 1],
['item19', 2],
['item20', 1],
['item21', 4],
['item22', 2],
['item23', 1],
['item24', 2],
['item25', 1],
['item26', 4],
['item27', 2],
['item28', 1],
['item29', 2],
['item30', 1],
['item31', 4],
['item32', 2],
['item33', 1],
['item34', 2],
['item35', 1],
['item36', 4],
['item37', 2],
['item38', 1],
['item39', 2],
['item40', 1],
['item41', 4],
['item42', 2],
['item43', 1],
['item44', 2],
['item45', 1],
['item46', 4],
['item47', 2],
['item48', 1],
['item49', 2],
['item50', 1],
['item51', 4],
['item52', 2],
['item53', 1],
['item54', 2],
['item55', 1],
['item56', 4],
['item57', 2],
['item58', 1],
['item59', 2],
['item60', 1],
['item61', 4],
['item62', 2],
['item63', 1],
['item64', 2],
['item65', 1],
['item66', 4],
['item67', 2],
['item68', 1],
['item69', 2],
['item70', 1],
['item71', 4],
['item72', 2],
['item73', 1],
['item74', 2],
['item75', 1],
['item76', 4],
['item77', 2],
['item78', 1],
['item79', 2],
['item80', 1],
['item81', 4],
['item82', 2],
['item83', 1],
['item84', 2],
['item85', 1]
]
}]
}
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
