Блог

Главная - Вопросы по программированию - Chartist .SVG Выравнивание / заполнение

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

#javascript #css #svg #chartist.js

#javascript #css #svg #chartist.js

Вопрос:

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

введите описание изображения здесь

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

Ответ №1:

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

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 пикселей (настолько большую, насколько он широк, он будет занимать всю ширину элемента.

750 пикселей

диаграмма настолько широкая, насколько она есть

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

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

Запуск примера на сайте snippets:

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