Question

我正在尝试使用dimplejs创建基于简单数据集（列：countries，index1，index2，index3，...）的组合条形图/折线图。 Index1将是条形图，index2向上应该是动态的（=添加和删除每个用户交互的索引）在顶部显示为折线图。

我发现我似乎需要为线条图形创建一个隐藏的第二个x轴。还有其他办法吗？

我也无法添加多个索引作为折线图。有没有办法添加更多的行，每个行基于一列（index2，index3，...）？

定义颜色是另一个问题：条形图都是一种颜色，这是好的但如果我想自己分配颜色，我必须给数据一个标签，显示在工具提示中（不好）？

为折线图指定颜色对我来说根本不起作用。我在这里需要一些建议。

到目前为止我的代码：

var svg = dimple.newSvg("#graphic", 550, 700);
// Get data for one year
var filteredData = dimple.filterData(data, 'year', '2010');

var myChart = new dimple.chart(svg, filteredData);
myChart.setBounds(50, 30, 480, 630);

var xAxis = myChart.addMeasureAxis('x', 'index1');
xAxis.title = 'Index Value';
xAxis.overrideMax = 1;

var yAxis = myChart.addCategoryAxis('y', 'countries');
yAxis.title = 'Country';

var xAxis2 = myChart.addMeasureAxis('x', 'index2');
xAxis2.title = null;
xAxis2.overrideMax = 1;
xAxis2.hidden = true;

var bars = myChart.addSeries('bars', dimple.plot.bar, [xAxis,yAxis]);
myChart.assignColor('bars', '#D3D3D3', '#D3D3D3');

var lines = myChart.addSeries('index2', dimple.plot.line, [xAxis2,yAxis]);

yAxis.addOrderRule('index1', false);
myChart.draw();

Answer 1

该数据结构不适合您在酒窝内的数据要求。 dimple希望数据的方式是将索引名称作为维度值：

var data = [
    { "Index" : "Index 1", "Country" : "UK", "Index Value": 0.2 },
    { "Index" : "Index 1", "Country" : "Spain", "Index Value": 0.7 },
    { "Index" : "Index 2", "Country" : "UK", "Index Value": 0.5 },
    { "Index" : "Index 2", "Country" : "Spain", "Index Value": 0.6 },
    { "Index" : "Index 3", "Country" : "UK", "Index Value": 0.4 },
    { "Index" : "Index 3", "Country" : "Spain", "Index Value": 0.3 },
    ...
];

然后，为了将索引1绘制为条形，其余为行，您需要将数据集拆分为2：

var barData = [],
    lineData = [],
    i,
    keyIndex = "Index 1";

for (i = 0; i < data.length; i += 1) {
    if (data[i]["Index"] === keyIndex) {
        barData.push(data[i]);
    } else {
        lineData.push(data[i]);
    }
}

然后您可以按如下方式定义图表：

var chart = new dimple.chart(svg),
    bars,
    lines;

chart.addMeasureAxis("x", "Index Value");
chart.addCategoryAxis("y", "Country");

bars = chart.addSeries("Index", dimple.plot.bar);
bars.data = barData;

lines = chart.addSeries("Index", dimple.plot.line);
lines.data = lineData;

chart.draw();

我还没有测试过这段代码，但它应该做你想做的事情（减去格式化等）。

如果你想继续上路，你已经开始使用上面的代码（这仍然是可能的），你会发现复合轴非常有助于避免隐藏的辅助轴和不同的最大/最小值的潜在问题。有关这些内容的示例，请参阅version 2 release notes中的相关部分。

我不明白为什么你不想用工具提示中出现的东西标记索引，它们之间必须有一些区别，你可以沟通，但如果你想删除索引您可以在工具提示中定义自定义工具提示，如图所示here。

编辑：我应该添加，如果您只想更改颜色的一组颜色，任意地将数据点归于您的数据点，您可以覆盖图表对象中的默认颜色，如所讨论的here。

使用dimplejs创建组合条形图/折线图并使用自定义颜色

1 个答案: