javascript - 向图表添加额外的数据点

Question

我正在创建一个简单的条形图(使用 dimple.js)来显示聊天室的参与情况。 Y 轴是不同的参与者，X 轴是他们发送到房间的消息数量。

我创建的图表非常简单，基于三列(participantID、Participant_Name、Message_Count)的数据:

var svg = dimple.newSvg("#chrt_participants", 1200, 600);
var chrt_participants = new dimple.chart(svg, data.result);
chrt_participants.addCategoryAxis("y", "Participant_Name");
chrt_participants.addMeasureAxis("x", "Message_Count");
chrt_participants.addSeries(null, dimple.plot.bar);
chrt_participants.draw();

我想将 participantID 关联到图表中，这样当有人点击某个栏时，该 ID 就会通过其他地方的 ajax 调用发送。我面临的挑战是我似乎只能访问我在创建图表时明确发送到图表的值(通过 addCategoryAxis 和 addMeasureAxis 函数)并且我我无法为条形图分配更多值。

所以我的问题是，当这些变量没有任何“视觉目的”时，如何将更多变量分配给图表元素？

Answer 1

这里的难点在于，dimple 适用于聚合数据集，因此您的原始数据行将无法直接访问。如果您将数据预先聚合到您需要的级别，然后告诉 dimple 按您想要的值分解系列(这不会影响绘图)，这可以解决这个问题，这将使额外的值可用。在这个 fiddle 中，我使用与该系列关联的体积字段更新标签，即使它没有被绘制。

chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", ["Fruit", "Year"]);
x.addGroupOrderRule([2012, 2013]);
chart.addMeasureAxis("y", "Value");
s = chart.addSeries(["Volume", "Year"], dimple.plot.bar);
s.addEventHandler("click", function (e) { 
d3.select("#infoLabel")
    .text("In " + e.seriesValue[1] + " we sold " + 
           e.seriesValue[0]  + " " + e.xValue + "s!");
});
chart.draw();

请在此处查看完整的工作示例:http://jsfiddle.net/uafGn/