JSON値で固定されたJSON変数は、私はこのように、データセットが変数にハードコードされているJavaScriptコードを持っているPHPファイル

から返さ交換 -JSON値で固定されたJSON変数は、私はこのように、データセットが変数にハードコードされているJavaScriptコードを持っているPHPファイル

var dataset = [ 
       {category: "Dept 1", measure: 0.30}, 
       {category: "Dept 2", measure: 0.25}, 
       {category: "Dept 4", measure: 0.15}, 
       {category: "Dept 3", measure: 0.05}, 
       {category: "Dept 5", measure: 0.18}, 
       {category: "Dept 6", measure: 0.04}, 
       {category: "Dept 7", measure: 0.03} 
       ] 
       ;

今、私はJSONデータを使用したいですこれはPHPファイルから返されています（mysqlクエリーを介して取得されます）。

これを行うには効果的な方法は何ですか？この場合、getJSONはうまく動作しますか？

注 - 私はd3.jsの円グラフで作業しています。このデータセットの要件は、そのグラフのためのものです。

EDIT -

function dsPieChart(){ 
 

 

 
\t var width = 400, 
 
\t \t height = 400, 
 
\t \t outerRadius = Math.min(width, height)/2, 
 
\t \t innerRadius = outerRadius * .999, 
 
\t \t // for animation 
 
\t \t innerRadiusFinal = outerRadius * .5, 
 
\t \t innerRadiusFinal3 = outerRadius* .45, 
 
\t \t color = d3.scale.category20() //builtin range of colors 
 
\t \t ; 
 
\t 
 

 
\t d3.json("data/mixchart.php", function(error, dataset) { 
 

 
    if (error) return console.warn(error); 
 
    else 
 
    { 
 
\t var vis = d3.select("#pieChart") 
 
\t  .append("svg:svg")    //create the SVG element inside the <body> 
 
\t  .data([dataset])     //associate our data with the document 
 
\t   .attr("width", width)   //set the width and height of our visualization (these will be attributes of the <svg> tag 
 
\t   .attr("height", height) 
 
\t  \t \t .append("svg:g")    //make a group to hold our pie chart 
 
\t   .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius 
 
\t \t \t \t ; 
 
\t \t \t \t 
 
    var arc = d3.svg.arc()    //this will create <path> elements for us using arc data 
 
     \t .outerRadius(outerRadius).innerRadius(innerRadius); 
 
    
 
    // for animation 
 
    var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius); 
 
\t var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius); 
 

 
    var pie = d3.layout.pie()   //this will create arc data for us given a list of values 
 
     .value(function(d) { return d.measure; }); //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) 
 
       .on("mouseover", mouseover) 
 
    \t \t \t \t .on("mouseout", mouseout) 
 
    \t \t \t \t .on("click", up) 
 
    \t \t \t \t ; 
 
    \t \t \t \t 
 
     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 
 
\t \t \t \t \t .append("svg:title") //mouseover title showing the figures 
 
\t \t \t \t .text(function(d) { return d.data.category + ": " + formatAsPercentage(d.data.measure); }); \t \t \t 
 

 
     d3.selectAll("g.slice").selectAll("path").transition() 
 
\t \t \t  .duration(750) 
 
\t \t \t  .delay(10) 
 
\t \t \t  .attr("d", arcFinal) 
 
\t \t \t  ; 
 
\t 
 
\t // Add a label to the larger arcs, translated to the arc centroid and rotated. 
 
\t // source: http://bl.ocks.org/1305337#index.html 
 
\t arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }) 
 
\t \t \t .append("svg:text") 
 
\t  .attr("dy", ".35em") 
 
\t  .attr("text-anchor", "middle") 
 
\t  .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; }) 
 
\t  //.text(function(d) { return formatAsPercentage(d.value); }) 
 
\t  .text(function(d) { return d.data.category; }) 
 
\t  ; 
 
\t  
 
\t // Computes the label angle of an arc, converting from radians to degrees. 
 
\t \t function angle(d) { 
 
\t \t  var a = (d.startAngle + d.endAngle) * 90/Math.PI - 90; 
 
\t \t  return a > 90 ? a - 180 : a; 
 
\t \t } 
 
\t \t  
 
\t \t 
 
\t \t // Pie chart title \t \t \t 
 
\t \t vis.append("svg:text") 
 
\t  \t .attr("dy", ".35em") 
 
\t  .attr("text-anchor", "middle") 
 
\t  .text("Revenue Share 2012") 
 
\t  .attr("class","title") 
 
\t  ; \t \t  
 
    } 
 
    }); 
 

 
\t \t 
 
\t function mouseover() { 
 
\t d3.select(this).select("path").transition() 
 
\t  .duration(750) 
 
\t   \t \t //.attr("stroke","red") 
 
\t   \t \t //.attr("stroke-width", 1.5) 
 
\t   \t \t .attr("d", arcFinal3) 
 
\t   \t \t ; 
 
\t } 
 
\t 
 
\t function mouseout() { 
 
\t d3.select(this).select("path").transition() 
 
\t  .duration(750) 
 
\t   \t \t //.attr("stroke","blue") 
 
\t   \t \t //.attr("stroke-width", 1.5) 
 
\t   \t \t .attr("d", arcFinal) 
 
\t   \t \t ; 
 
\t } 
 
\t 
 
\t function up(d, i) { 
 
\t 
 
\t \t \t \t /* update bar chart when user selects piece of the pie chart */ 
 
\t \t \t \t //updateBarChart(dataset[i].category); 
 
\t \t \t \t updateBarChart(d.data.category, color(i)); 
 
\t \t \t \t updateLineChart(d.data.category, color(i)); 
 
\t \t \t 
 
\t } 
 
} 
 

 

 
dsPieChart();

編集2提案どのように見えるかです

出典

2016-04-04 Cini09

var dataset = []; 
$.getJSON("your_php_file", function(result){ 
     dataset = result; 
});

これは動作しますが、あなたのPHPファイルのみJSONを返している心に留めておくだろうを参照してください...あなたがオプションで遊ぶことができ休みます。

出典

2016-04-04 11:13:28

私は上記のコードで固定データセットを置き換えましたが、。私は何が欠けていますか？ – Cini09

var dataset = []; \t $ .getJSON（ "data/mixchart.php"、function（result）{ dataset = result; \t}）; – Cini09

以下を確認してください： –

JSONを取得する方法はたくさんありますが、既にd3で作業しているので、d3.jsonは良い方法です。

など。

d3.json('your/json.json', function(error, json) { 
    if (error) return console.warn(error); 
    doSomethingWithJson(json) 
});

はまたthe d3 API

出典

2016-04-04 10:59:37

あなたの提案を使って試した更新されたコードを見つけてください。 – Cini09

問題を見つけたら教えてください。 – Cini09

JSON値で固定されたJSON変数は、私はこのように、データセットが変数にハードコードされているJavaScriptコードを持っているPHPファイル

答えて

関連する問題