d3.js绘制饼状图,悬浮出现字以及点击事件 |
您所在的位置:网站首页 › d3和echarts › d3.js绘制饼状图,悬浮出现字以及点击事件 |
代码以及注释如下: const width = 300; // 定义圆的宽度 const height = 300; // 定义圆的高度 const radius = Math.min(width, height) / 2; // 算出半径 const color = d3.scaleOrdinal() .range(["#98abc5", "#8a89a6", "#6b486b", "#a05d56", "#d0743c"]); // 配置颜色 const arc = d3.arc() .outerRadius(radius - 10) // 外圆半径 .innerRadius(0) ; // 内圆半径,如果为零则为实心圆 const pie = d3.pie() // 定义饼图 .sort(null) .value(d => d.population); // 通过以下data数据中的population来分配饼图所占空间 const svg = d3.select("#gb08fe") // 添加一个svg图 .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); const data = [{ // 创建数据 age: " |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |