SharePoint和D3.js用于制图 [英] SharePoint and D3.js for charting

问题描述

有人在sharepoint中使用列表和d3.js代码制作图表吗?
在线上的大多数内容似乎都很疲劳.任何人都有分步说明

Anyone have any true example using a list in sharepoint and d3.js code to make a chart?
Majority of stuff online seems to be very fatigue. Anyone have step by step instructions

https://d3js.org/

https://d3js.org/

推荐答案

以下有关使用d3.js和SharePoint列表的示例 构建饼图供您参考:

The following example about using d3.js and SharePoint List build a Pie Chart for your reference:

1.在SharePoint中创建一个自定义列表，然后在列表中添加一个Number列.在我的情况下，列表名称"CustomList21"和新的列名称值".

1. Create a custom list in SharePoint, and add a Number column in list. In my case, the list name "CustomList21" and new column name "Value".

2.将一些数据添加到自定义列表中.

2. Add some data into custom List.

3.将以下代码添加到Web部件页面的脚本编辑器Web部件中(我在列表视图页面中添加代码).

3. Add the following code into a script editor web part in the web part page(I add the code in list view page).

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script> 
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script> 
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script> 
<script type="text/javascript">

(function(){ var chartData = getListData("CustomList21"); var data = []; for(var i = 0; i< chartData.length; i ++){ data.push({"label":chartData [i] .Title，"value":chartData [i] .Value})； } initChart(数据); }); 函数initChart(chartData){ var w = 300，//宽度 h = 300，//高度 r = 100，//半径 color = d3.scale.category20c(); //内置颜色范围 数据= chartData; var vis = d3.select(#PieChart") .append("svg:svg")//在< div id ="PieChart">/div中创建SVG元素. .data([data])//将我们的数据与文档相关联 .attr("width"，w)//设置可视化的宽度和高度(这些将是< svg>标签的属性 .attr("height"，h) .append("svg:g")//组成一个小组来保存我们的饼图 .attr("transform"，"translate(" + r +，" + r +)")//将饼图的中心从0、0移至半径，半径 var arc = d3.svg.arc()//这将创建< path>使用弧线数据为我们提供的元素 .outerRadius(r); var pie = d3.layout.pie()//这将在给定值列表的情况下为我们创建弧数据 .value(function(d){return d.value;}); //我们必须告诉它访问数据数组中每个元素的值 var arcs = vis.selectAll("g.slice")//选择所有< g>具有类slice的元素(尚无) .data(pie)//关联生成的饼状数据(一个圆弧数组，每个圆弧具有startAngle，endAngle和value属性) .enter()//这将创建< g>每个额外"元素的元素.应该与选择相关联的数据元素.结果是创建一个< g>.对于数据数组中的每个对象 .append("svg:g")//创建一个组来保存每个切片(我们将有一个与每个切片关联的< path>和< text>元素) .attr("class"，"slice"); //允许我们在切片中设置样式(例如文本) arcs.append("svg:path") .attr("fill"，function(d，i){return color(i);})//设置要从上面定义的颜色函数中选择的每个切片的颜色 .attr("d"，弧)； //这会通过弧线绘制功能使用关联的数据(饼)创建实际的SVG路径 arcs.append("svg:text")//向每个切片添加标签 .attr("transform"，function(d){//将标签的原点设置为圆弧的中心 //我们必须确保在调用arc.centroid之前进行设置 d.innerRadius = 0; d.outerRadius = r; 返回"translate(" + arc.centroid(d)+)"； //这给了我们一对像[50，50]的坐标 }) .attr("text-anchor"，"middle")//将文本以其原点为中心 .text(function(d，i){return data [i] .label;}); //从原始数据数组中获取标签 } 函数getListData(listName){ var结果； var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_ api/web/lists/getbytitle('" + listName +"')/items?

(function () { var chartData=getListData("CustomList21"); var data=[]; for(var i=0;i<chartData.length;i++){ data.push({"label":chartData[i].Title,"value":chartData[i].Value}); } initChart(data); }); function initChart(chartData){ var w = 300, //width h = 300, //height r = 100, //radius color = d3.scale.category20c(); //builtin range of colors data = chartData; var vis = d3.select("#PieChart") .append("svg:svg") //create the SVG element inside the <div id="PieChart"></div> .data([data]) //associate our data with the document .attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag .attr("height", h) .append("svg:g") //make a group to hold our pie chart .attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius var arc = d3.svg.arc() //this will create <path> elements for us using arc data .outerRadius(r); var pie = d3.layout.pie() //this will create arc data for us given a list of values .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet) .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) .attr("class", "slice"); //allow us to style things in the slices (like text) arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function arcs.append("svg:text") //add a label to each slice .attr("transform", function(d) { //set the label's origin to the center of the arc //we have to make sure to set these before calling arc.centroid d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50] }) .attr("text-anchor", "middle") //center the text on it's origin .text(function(d, i) { return data[i].label; }); //get the label from our original data array } function getListData(listName){ var results; var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listName+"')/items?

select = Title，Value;

select=Title,Value";

这篇关于SharePoint和D3.js用于制图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！