Как сделать круговую диаграмму из highcharts адаптивнойCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как сделать круговую диаграмму из highcharts адаптивной

Сообщение Anonymous »

Я уже несколько дней пытаюсь сделать круговую диаграмму из highcharts адаптивной. Я работаю над проектом среднего размера, и иногда легко потерять обзор.
Я уже проверял это: http://www.angulartutorial.net/2014/ 03/Response-highchart.html, но безуспешно.

Проблема: Highchart выглядит хорошо, когда ширина равна 1920 пикселей.
Когда это 900px, то описание пирога (серия -> данные) находится за пределами браузера и его невозможно прочитать, к тому же пирог для меня маловат.

Вопрос: Как мне избежать такого поведения? Мне нужен больший пирог и возможность читать (серии-> данные).

Я предоставляю следующий код:

Мой HTML-код:

Код: Выделить всё


Title plot
Bla blablabla blab bl  % blabla = [b] 
 % blablabla blablabla[/b]



Код CSS:

Код: Выделить всё

#container-independency{
width: 90%;
max-width: 1620px;
background-color: #b8860b;
clear: both;
padding: 1%;
display: none;
box-sizing: border-box;
}

#independency{
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #ffb6c1;
box-sizing: border-box;
}

#highcharts_container{
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;

}
Графики:

Код: Выделить всё

('#highcharts_container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},

title:{
text:''
},

credits: {
enabled: false
},

navigation: {
buttonOptions: {
enabled: false
}
},

tooltip: {
pointFormat: '{point.percentage:.1f}%[/b]' [b]          },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}[/b]: {point.percentage:.2f} %',
style: {
color: '#58585a',
fontFamily: 'klavika-web, sans-serif', fontSize: '12px'
}
}
}
},
series: [{

name: '',
data: [
['Property1aaa/Property2aaa/Property3aaaaaa', independency],
['More blablabla blablabla', 100-independency],
]
}]
});//highcharts_container
Обновление:

[img]https://i. sstatic.net/5SgLX.jpg[/img]


Подробнее здесь: https://stackoverflow.com/questions/321 ... responsive
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»