Question

我收到了以下数据：

var data = [
    { id: 0, region: 'europe', average_price: 25, product_count: 10 },
    { id: 1, region: 'europe', average_price: 60, product_count: 40 },
    { id: 2, region: 'europe', average_price: 120, product_count: 15 },
    { id: 3, region: 'usa', average_price: 35, product_count: 20 },
    { id: 4, region: 'usa', average_price: 70, product_count: 70 },
    { id: 5, region: 'usa', average_price: 140, product_count: 35 },
    { id: 6, region: 'asia', average_price: 15, product_count: 15 },
    { id: 7, region: 'asia', average_price: 40, product_count: 40 },
    { id: 8, region: 'asia', average_price: 110, product_count: 25 },
];

我想绘制一个带有此定义的气泡图：

var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "region");
chart.addMeasureAxis("y", "average_price");
chart.addMeasureAxis("z", "product_count");
// chart.addSeries(['region'], dimple.plot.bubble); 
chart.addSeries(['region','id'], dimple.plot.bubble);   
chart.draw();

我的问题是，如果我在＆＃39; region＆＃39;上添加系列，则每个区域的所有数据点都会聚合在一个气泡中。我不想让它们聚合在一起。我想为每个地区绘制三个气泡。

如果我在[＆＃39; region＆＃39;，＆＃39; id＆＃39;]上添加系列，则气泡是分开的，但每个气泡都有不同的颜色。我希望每个地区都有一种颜色。

应该很简单......

这是小提琴：https://jsfiddle.net/93vk0c0q/2/

Answer 1

像你说的那么简单。附上工作代码。

chart.addSeries(['id','region'], dimple.plot.bubble); // interchange

＆＃13;

"use strict";

	var svg = dimple.newSvg('.chart-container',"100%","100%");
	var data = [
        { id: 0, region: 'europe', average_price: 25, product_count: 10 },
        { id: 1, region: 'europe', average_price: 60, product_count: 40 },
        { id: 2, region: 'europe', average_price: 120, product_count: 15 },
        { id: 3, region: 'usa', average_price: 35, product_count: 20 },
        { id: 4, region: 'usa', average_price: 70, product_count: 70 },
        { id: 5, region: 'usa', average_price: 140, product_count: 35 },
        { id: 6, region: 'asia', average_price: 15, product_count: 15 },
        { id: 7, region: 'asia', average_price: 40, product_count: 40 },
        { id: 8, region: 'asia', average_price: 110, product_count: 25 },
    ];
	var chart = new dimple.chart(svg, data);
	chart.addCategoryAxis("x", "region");
    chart.addMeasureAxis("y", "average_price");
    chart.addMeasureAxis("z", "product_count"); 
    chart.addSeries(['id','region'], dimple.plot.bubble); 
	chart.draw();
	
	window.addEventListener('resize', function()
	{
		chart.draw(0, true);
	});

＆＃13;

.chart-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

svg {
	background: #ddd;
}

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.js"></script>
<div class="chart-container"></div>

＆＃13;

酒窝 - 气泡图中的系列颜色

1 个答案: