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

Question

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

1

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

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, который шире, чем нужно. Это означает, что позиционирование нецелесообразно. Если я расположу круговую диаграмму в верхнем левом углу, она на самом деле окажется в верхней середине, а это не то, что я хочу.

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

JackWilson 27 март 2019, в 12:02

Источник

Теги:

javascript

css

css3

svg

chartist.js

1 ответ

Ещё вопросы

Tschallacka · Answer 1 · 2019-03-27T19-12-00.000Z

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

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);

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

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

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

Установив контейнерный элемент на высоту 750 пикселей (по ширине и ширине, он будет занимать всю ширину элемента).

Так что теперь мы должны автоматизировать это. Предполагая, что у вас есть 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";