Question

我使用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>

Answer 1

您的数据中没有日期字段。

该行：

myChart.setStoryboard("Date");

迭代日期字段中的不同值，您需要将名称更改为数据中的某些内容，或者添加名为Date的字段。

动画饼泡泡数据

1 个答案: