文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用svg图标在饼图的每一片饼图？

问如何使用svg图标在饼图的每一片饼图？
EN

Stack Overflow用户

提问于 2019-11-20 12:20:19

回答 1查看 126关注 0票数 0

我想把svg图标添加到饼形图的每个值片中，就像在这个图像中显示的那样。图像

我在谷歌上搜索的太多了，但我不能，有人能帮我吗？我正在尝试的代码..。

var myConfig = {
		"type": "ring",
		"plot": {
			"refAngle": 320,
			"slice": 100
		},
		"legend": {
			"align":'center',
			"item": {
				"height": "40px",
				"padding":'10px 40px',	
			},
			"marker": {
				"width":'40px',
				"height":'40px',	
			},
		},
		"series": [{
			"values": [38],
			"text": "Instagram",
			"background-color": "#C32AA3 #FFDC7D",
		},
		{
			"values": [69],
			"text": "Pinterest",
			"background-color": "#BD081C",
		},			
		]
	};

	zingchart.render({
		id: 'pie-chart-2',
		data: myConfig,
		height: 400,
		width: "100%"
	});

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
	<body>
		<div id='pie-chart-2'></div>
	</body>
</html>

javascript

jquery

html

css

回答 1

Stack Overflow用户

发布于 2019-11-22 06:42:46

是的，这是可以做到的，这段代码生成了每个图表中都有图标的饼形图。

var aPalette = [
	'#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC', 
	'#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
];
var aIcons = [
	'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 
	'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11' 
];
var aText = [
	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
];
var aTooltipText = [
	'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
	'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
];

var render = function() {

	var cdata = {
		resources : [
			{
				type : 'css',
				url : 'https://fonts.googleapis.com/css?family=Exo+2'
			}
		],
		type : 'pie',
		plotarea : {
			margin : 0
		},
		scaleR : {
			aperture : parseInt($('#a').val(), 10),
			refAngle : parseInt($('#ra').val(), 10)
		},
		plot : {
			detach : false,
			borderWidth : 0,
			borderColor : '#fff',
			slice : '19%',
			pieTransform : 'fold=60',
			hoverState : {
				visible : false
			}
		},
		series:[]
	};

	if ($('#an').val() !== '-1') {
		cdata['plot'].animation = {
			speed : 200,
			method : 0,
			effect : parseInt($('#an').val(), 10),
			sequence : parseInt($('#s').val(), 10)
		};
	}

	var items = parseInt($('#n').val(), 10);

	for (var i=0;i<items;i++) {
		var no = i+1;
		cdata['series'].push({
			values : [1],
			tooltipText : aTooltipText[i],
			dataNo : ((no<=9)?'0'+no:no),
			valueBox : [
				{
					width : 48,
					height : 48,
					placement : 'fixed=90%;75%',
					borderRadius : 23,
					borderWidth : 0,
					fontSize : 6,
					shadow : false,
					color : '#4B4B4B',
					decimals : 0,
					fontFamily : '"Exo 2"',
					text : '<span style="font-size:27px">%data-no</span><br><span style="font-size:9px;color:' + aPalette[i] + '">\u2002\u2002OPTION</span>'
				},
				{
					width : 24,
					height : 24,
					placement : 'fixed=80%;6',
					backgroundColor : 'none',
					shadow : false,
					backgroundImage : ICONS24[aIcons[i]],
					backgroundRepeat : 'no-repeat',
					text : ' '
				},
				{
					align : 'left',
					placement : 'fixed=55%;50%',
					backgroundColor : 'none',
					shadow : false,
					fontSize : 9,
					text : aText[i]
				}
			],
			backgroundColor : aPalette[i],
			gradientColors : ['#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
			gradientStops : [0.001, 0.30, 0.31, 0.35, 0.36, 0.5].join(' ')
		});
	}

	zingchart.render({
		id : 'zc',
		width : 600,
		height : 600,
		output : 'svg',
		data : cdata,
		events : {
			animation_end : function(p) {
				if ($('#an').val() !== '-1') { 
					addElements(p);
				}
			},
			load : function(p) {
				if ($('#an').val() === '-1') { 
					addElements(p);
				}
			}
		}
	});
}

WebFont.load({
	google : {
		families: ['Exo 2']
	},
	active : function() {

		$('#r').click(function() {
			render();
		});
		render();

		var _cpoint_ = function(iX, iY, iR, iAngle) {
			return [iX + iR*Math.cos(iAngle*2*Math.PI/360), iY + iR*Math.sin(iAngle*2*Math.PI/360)];
		}

		window.addElements = function(p) {
			var iPlots = zingchart.exec(p.id, 'getplotlength');
			var aObjects = [], oInfo;
			for (var i=0;i<iPlots;i++) {
				oInfo = zingchart.exec(p.id, 'getobjectinfo', {
					object : 'node',
					plotindex : i,
					nodeindex : 0
				});
				var iSlice = oInfo.size * oInfo.slice;
				var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size)/2 - 4, oInfo.angleStart);
				
				aObjects.push({
					id : 'sh'+i,
					anchor : 'c',
					x : aCP[0],
					y : aCP[1],
					width : (oInfo.size - iSlice) - 2,
					height : 10,
					backgroundColor : '#eee',
					angle : oInfo.angleStart,
					gradientColors : 'rgba(0,0,0,0) rgba(0,0,0,0) rgba(100,100,100,0.5) rgba(100,100,100,0.4) rgba(100,100,100,0.3) rgba(100,100,100,0.2) rgba(100,100,100,0.1) rgba(100,100,100,0)',
					gradientStops : '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
				});
			}

			aObjects.push(
				{
					x : oInfo.x,
					y : oInfo.y,
					width : 1.75*oInfo.slice*oInfo.size,
					fontFamily : '"Exo 2"',
					fontSize : 14,
					align : 'center',
					fontWeight : 600,
					color : '#000',
					anchor : 'c',
					text : 'INFOGRAPHIC<br>TEMPLATE'
				}
			);

			zingchart.exec(p.id, 'addobject', {
				type : 'label',
				data : aObjects
			});
		};

	}

});

body { 
  margin:10px;
  padding:10px; 
}

*, input, button, select, textarea, label {
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}

<html>
	<head>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
		<script>
      zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    </script>
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
    </script>
    	<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>
  </head>
	<body>
    
    <script>
      window.setTimeout(function() {
        $(document.body).append('<iframe style="border:0px;position:absolute;top:0px;right:0px;width:270px;height:480px;" src="https://codepen.io/zingchart/full/ef639d5ca7dd69ae067720228a01d542"></iframe>');
      }, 2500);
    </script>
    
  <div style="padding:5px;">
	<select id="n">
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12" selected="selected">12</option>
	</select> elements, 
	<select id="a">
		<option value="180">180</option>
		<option value="270">270</option>
		<option value="360" selected="selected">360</option>
	</select> aperture, starting at 
	<select id="ra">
		<option value="0">0</option>
		<option value="45">45</option>
		<option value="90">90</option>
		<option value="135">135</option>
		<option value="180">180</option>
		<option value="225">225</option>
		<option value="270" selected="selected">270</option>
		<option value="315">315</option>
	</select> degrees, with
	<select id="an">
		<option value="-1">no animation</option>
		<option value="0">effect 0</option>
		<option value="1" selected="selected">effect 1</option>
		<option value="2">effect 2</option>
		<option value="3">effect 3</option>
		<option value="4">effect 4</option>
	</select>, 
	<select id="s">
		<option value="0">non-sequenced</option>
		<option value="1" selected="selected">in sequence</option>
	</select>
	<button id="r">Render</button>
</div>
    
		<div id="zc"></div>
	
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58954227

复制

相似问题

问如何使用svg图标在饼图的每一片饼图？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用svg图标在饼图的每一片饼图？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用svg图标在饼图的每一片饼图？
EN