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

我正在尝试使用 dimplejs 创建基于简单数据集（列：国家、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();

该数据结构并不适合您在凹坑内的数据要求。凹坑想要的数据方式是将索引名称作为维度值：

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();

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

如果您想继续在上面的代码中开始的道路（这仍然是可能的），您会发现复合轴非常有助于避免隐藏的辅助轴和不同最大/最小值的潜在问题。请参阅中的相关部分版本 2 发行说明 https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0举个例子。

我不明白为什么您不想用工具提示中出现的内容来标记索引，它们之间一定存在一些您可以交流的差异，但如果您想从工具提示中删除索引名称，您可以定义自定义工具提示如图所示here http://dimplejs.org/adhoc_viewer.html?id=adhoc_bar_custom_tooltips.

编辑：我应该添加，如果您只想更改凹坑将任意归因于您的数据点的颜色集，您可以覆盖图表对象中的默认颜色，如上所述here https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#defaultColors.