Chartist .SVG Выравнивание / Заполнение - PullRequest
Новая
       11

Chartist .SVG Выравнивание / Заполнение

1 голос
/ 27 марта 2019

Я создаю круговую диаграмму со следующими данными: 

var mapPieData = {
series: [
  { value: 578, className: "pieNegativeColour", label: "online" },
  { value: 3182, className: "piePositiveColour", label: "offline" }
],
highest: { label: "Huawei", value: "10258", className: "pieColour1" },
maximum: 3760};

Я использую следующие опции для его настройки: 

var mapPieOptions = {
showLabel: true,
fullWidth: true,
chartPadding: 0};

Мне нужно наложить сгенерированную круговую диаграмму на карту .SVG.

Проблема в том, что сгенерированная круговая диаграмма центрируется внутри контейнера .SVG, который шире, чем должен быть. Это означает, что позиционирование нецелесообразно. Если я расположу круговую диаграмму в верхнем левом углу, она фактически окажется в верхней середине, а это не то, что мне нужно.

enter image description here

Я хочу удалить это лишнее пространство вокруг круговой диаграммы.

1 Ответ

1 голос
/ 28 марта 2019

Мне удалось воссоздать вашу круговую диаграмму с предоставленным кодом на веб-сайте с примерами скриптов.

http://gionkunz.github.io/chartist-js/examples.html

$('.ct-chart').css({'background-color':'white'});

var data = {
    series: [
      { value: 578, className: "ct-series-c", label: "online" },
      { value: 3182, className: "ct-series-a", label: "offline" }
    ],
    highest: { label: "Huawei", value: "10258", className: "pieColour1" },
    maximum: 3760
};

var options = {
    showLabel: true,
    fullWidth: true,
    chartPadding: 0
};

new Chartist.Pie('.ct-chart', data, options);

pie chart smack in the middle

Я проанализировал это и заметил, что если установить отступы на отрицательное значение, рендер увеличится в размере, но будет обрезан. 

var options = {
    showLabel: true,
    fullWidth: true,
    chartPadding: -40
};

clipped chart

Затем я увеличил размер содержащего элемента, который составлял 100%, но фактически не занимал всю высоту.

При установке элемента контейнера на высоту 750 пикселей (его ширина должна быть на всю ширину элемента.

750 px

broad as it is wide chart

Так что теперь мы должны автоматизировать это. Предполагая, что у вас есть JQuery под рукой, вы можете просто сделать: 

var $chart = $('.ct-chart');
$chart.css({'height':$chart.width()+'px'});

Пример выполнения на сайте фрагментов: 

var $chart = $('.ct-chart');
$chart.css({'background-color':'white','height':$chart.width()+'px'}); 
var data = { 
    series: [ 
      { value: 578, className: "ct-series-c", label: "online" },
      { value: 3182, className: "ct-series-a", label: "offline" }
    ],
    highest: { label: "Huawei", value: "10258", className: "pieColour1" },
    maximum: 3760
};

var options = {
    showLabel: true,
    fullWidth: true,
    chartPadding: 0
};

new Chartist.Pie('.ct-chart', data, options);

Если у вас нет jQuery, замените строки jQuery на: 

var chart = document.querySelector('#pie-with-custom-labels .ct-chart');
chart.style.height = chart.clientWidth+"px";
...