JavaScriptでJSONArraysの箇条書きの図を作成する方法は？

ヘルプ！これらのWebページからBullet Charts JavaScriptコードを変更する方法： http://mbostock.github.com/d3/ex/bullet.html このようにして、ビジュアル化のためのデータは "bullet.json"（d3.json（ "bullets.json"、function（data ）{）が、それは、ソースコード内の変数としてすでにだろう私のソリューションが動作しません：。JavaScriptでJSONArraysの箇条書きの図を作成する方法は？

var data = [{title: "Revenue", subtitle: "", ranges: [0,0,0], measures: [220,270], markers: [0] },    //!!! 
     {title: "Profit" , subtitle: "", ranges: [0,0,0], measures: [21,23] , markers: [0] } ];

ソースコード：VARデータの後

<html> 
<head> 
<title>Bullet Charts</title> 
<script type="text/javascript" src="../../d3.js"></script> 
<script type="text/javascript" src="../../d3.chart.js"></script> 
<link type="text/css" rel="stylesheet" href="../button.css"/> 
<link type="text/css" rel="stylesheet" href="bullet.css"/> 
</head> 
<body> 
<div id="chart"> 
    <button class="first last" onclick="transition()"> 
    Update 
    </button><p> 
</div> 
<script> 
var w = 960, 
h = 50, 
m = [5, 40, 20, 120]; // top right bottom left 

var chart = d3.chart.bullet() 
.width(w - m[1] - m[3]) 
.height(h - m[0] - m[2]); 

//d3.json("bullets.json", function(data) { 

var data = [{title: "Revenue", subtitle: "", ranges: [0,0,0], measures: [220,270], markers: [0] },    //!!! 
     {title: "Profit" , subtitle: "", ranges: [0,0,0], measures: [21,23] , markers: [0] } ];    //!!! 

var vis = d3.select("#chart").selectAll("svg") 
    .data(data) 
.enter().append("svg:svg") 
    .attr("class", "bullet") 
    .attr("width", w) 
    .attr("height", h) 
.append("svg:g") 
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")") 
    .call(chart); 

var title = vis.append("svg:g") 
    .attr("text-anchor", "end") 
    .attr("transform", "translate(-6," + (h - m[0] - m[2])/2 + ")"); 

    title.append("svg:text") 
    .attr("class", "title") 
    .text(function(d) { return d.title; }); 

    title.append("svg:text") 
    .attr("class", "subtitle") 
    .attr("dy", "1em") 
    .text(function(d) { return d.subtitle; }); 

    chart.duration(1000); 
window.transition = function() { 
vis.map(randomize).call(chart); 
}; 
} 
); 

function randomize(d) { 
if (!d.randomizer) d.randomizer = randomizer(d); 
d.ranges = d.ranges.map(d.randomizer); 
d.markers = d.markers.map(d.randomizer); 
d.measures = d.measures.map(d.randomizer); 
return d; 
} 

function randomizer(d) { 
var k = d3.max(d.ranges) * .2; 
return function(d) { 
return Math.max(0, d + k * (Math.random() - .5)); 
}; 
} 

</script> 
    </body> 
</html>

出典

2011-10-29 strausionok

= [{タイトル： "（...）タイプ：

data = JSON.stringify(data);

出典

2011-10-29 22:47:00

var Data='${datafrom}'; 
Json= JSON.parse(Data); 

var chart = d3.bullet() 
    .width(width) 
    .height(height); 

    var svg = d3.select("body").selectAll("svg") 
     .data(Json) 
     .enter().append("svg") 
     .attr("class", "bullet") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(chart); 


    });

出典

2013-08-26 08:45:41

JavaScriptでJSONArraysの箇条書きの図を作成する方法は？

答えて

関連する問題