图表师 .SVG Alignment/Padding

Question

我使用以下数据生成 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 容器的中心，该容器比它需要的更宽。这意味着定位是不切实际的。如果我将饼图放在左上角，它实际上会在顶部中间，这不是我想要的。

我想删除饼图周围多余的 space。

Answer 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 像素高度（宽度与宽度一样，它将占据元素的整个宽度。

所以现在我们必须将其自动化。假设你手头有 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";

图表师 .SVG Alignment/Padding

Chartist .SVG Alignment/Padding

javascript

css

svg

chartist.js