0
bir php dosyasından döndü hangi bir php dosyasından (mysql sorgusuyla getiriliyor) döndürülüyor.veri kümesi sabit kodlanmış böyle bir değişkende nerede olduğunu bir JavaScript kodu var
Bunu yapmanın etkili yolu nedir? JSON bu durumda iyi çalışır mı?
Not- Ben bir pasta grafik üzerinde d3.js çalışıyorum ve bu veri kümesi gereksinimi bu grafik için.
DÜZENLEME - Bu kod sonra Yapılanma önerilen görünüyor nasıl
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();Düzenleme 2 -
<script type="text/javascript">
/*
################ FORMATS ##################
-------------------------------------------
*/
var \t formatAsPercentage = d3.format("%"),
\t \t formatAsPercentage1Dec = d3.format(".1%"),
\t \t formatAsInteger = d3.format(","),
\t \t fsec = d3.time.format("%S s"),
\t \t fmin = d3.time.format("%M m"),
\t \t fhou = d3.time.format("%H h"),
\t \t fwee = d3.time.format("%a"),
\t \t fdat = d3.time.format("%d d"),
\t \t fmon = d3.time.format("%b")
\t \t ;
\t
\t
var \t 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 ;
d3.json("data/mixchart.php", function(error,data) {
data.forEach(function(d) {
d.category =d.category;
d.measure = d.measure;
});
\t \t //if (err) return console.warn(err);
\t var vis = d3.select("#pieChart")
\t .append("svg:svg") //create the SVG element inside the <body>
\t .data(data) //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
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);
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 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 }
</script>
Yukarıdaki kodla birlikte sabit veri kümesini değiştirdim ancak hala çalışmıyor . Neyi kaçırıyorum? – Cini09
var veri kümesi = []; \t $ .getJSON ("data/mixchart.php", işlev (sonuç) { veri kümesi = sonuç; \t}); – Cini09
Aşağıdakileri kontrol edin: –