我使用dimple.js
Pie Bubbles图表但是我为图表设置了数据,但图表没有正常工作。我不知道我的数据有什么问题。抱歉,因为我的愚蠢问题,我是d3.js
和dimple.js
的新用户
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="chartContainer"></div>
</body>
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/dimple.js"></script>
<script>
var svg = dimple.newSvg("#chartContainer", 590, 400);
// Define all the axes
data = [
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 495, 330);
var xAxis = myChart.addMeasureAxis("x", "Distribution");
var yAxis = myChart.addMeasureAxis("y", "Price");
var segments = myChart.addMeasureAxis("p", "Unit Sales");
var size = myChart.addMeasureAxis("z", "Sales Value");
var ring = myChart.addSeries(["Price Tier", "Channel"], dimple.plot.pie);
var pie = myChart.addSeries(["Price Tier", "Owner"], dimple.plot.pie);
// Zoom in the axis bounds
xAxis.overrideMin = 40;
xAxis.overrideMax = 70;
yAxis.overrideMax = 150;
// Set the maximum radius for the bubbles
ring.radius = 75;
pie.radius = 75;
// Create fixed 10px ring with a 5px
// margin (negative sizes are calculated inwards)
ring.innerRadius = "-10px";
pie.outerRadius = "-15px";
// Draw averages for the pie and ring
ring.aggregate = dimple.aggregateMethod.avg;
pie.aggregate = dimple.aggregateMethod.avg;
// Animate by date
myChart.setStoryboard("Date");
myChart.draw();
</script>
</html>
答案 0 :(得分:0)
您的数据中没有日期字段。
该行:
myChart.setStoryboard("Date");
迭代日期字段中的不同值,您需要将名称更改为数据中的某些内容,或者添加名为Date的字段。