我使用以下数据生成了一个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容器内居中,该容器比需要的宽度要宽。这意味着定位是不切实际的。如果我将饼形图放置在左上方,则实际上它会居中于顶部中间,这不是我想要的。
我想删除饼图周围的多余空间。
最佳答案
我可以使用示例提琴在网站上使用您提供的代码重新创建饼图。
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);
我对此进行了分析,并注意到,如果将padding设置为负值,则渲染的大小会增加,但会被裁剪。
var options = {
showLabel: true,
fullWidth: true,
chartPadding: -40
};
然后,我增加了包含元素的大小,该元素的大小为100%,但实际上并没有占据整个高度。
通过将容器元素设置为750px的高度(与宽度一样宽,它将占用元素的整个宽度。
所以现在我们必须使它自动化。
假设您手头有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";
关于javascript - Chartist .SVG对齐/填充,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55374893/