Javascript SVG对齐/填充
我使用以下数据生成图表列表饼图:Javascript SVG对齐/填充,javascript,css,svg,chartist.js,Javascript,Css,Svg,Chartist.js,我使用以下数据生成图表列表饼图: var mapPieData = { series: [ { value: 578, className: "pieNegativeColour", label: "online" }, { value: 3182, className: "piePositiveColour", label: "offline" } ], highest: { label: "Huawei", value: "10258", className: "pieColour1
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容器中,该容器比需要的要宽。这意味着定位是不切实际的。如果我将饼图放在左上角,它实际上会在中上角结束,这不是我想要的
我想删除饼图周围的额外空间。我能够使用网站上提供的代码,用示例小提琴重新创建饼图 我对此进行了分析,并注意到如果我将填充设置为负值,渲染的大小会增加,但会被剪裁
var options = {
showLabel: true,
fullWidth: true,
chartPadding: -40
};
然后我增加了包含元素的大小,它是100%,但实际上并没有占据整个高度
通过将容器元素设置为750px高度(宽度与宽度相同),它将占据元素的整个宽度
因此,现在我们必须将其自动化。
假设您手头有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";
var chart = document.querySelector('#pie-with-custom-labels .ct-chart');
chart.style.height = chart.clientWidth+"px";