在dimplejs水平条形图中绘制中位数，下四分位数

Question

我已经绘制了简单的水平分组条形图我想要的是在每个条形上使用dimpleJs创建一个中间和下四分位数的点尝试很多方法仍然找不到怎么做？

我的JSON数据是：

var data = [{
    "topic_id": 38,
    "level": "easy",
    "all_marks": [100],
    "total marks": 80,
    "name": "gamma",
    "topic label": "sec A",
    "median" : 18,
}, {
    "topic_id": 38,
    "level": "medium",
    "all_marks": [30],
    "total marks": 10,
    "name": "alpha",
    "topic label": "sec A",
    "median" : 11,
}, {
    "topic_id": 38,
    "level": "difficult",
    "all_marks": [40],
    "total marks": 10,
    "median" : 15,
    "name": "delta",
    "topic label": "sec A"
}, {
    "topic_id": 39,
    "level": "easy",
    "all_marks": [100],
    "total marks": 80,
    "median" : 13,
    "name": "gamma",
    "topic label": "sec B"
}, {
    "median" : 11,
    "topic_id": 39,
    "level": "medium",
    "all_marks": [30],
    "total marks": 10,
    "name": "alpha",
    "topic label": "sec B"
}, {
    "median" : 10,
    "topic_id": 39,
    "level": "difficult",
    "all_marks": [40],
    "total marks": 10,
    "name": "delta",
    "topic label": "sec B"
}];

Answer 1

我可以看到数据的中位数而不是更低的四分位数，如果你能以与中位数相同的格式获得数据，那么将它添加到图表中相当简单。下面是一个将中位数添加为浮动标记的示例，如果您希望包含点而非矩形，则可以将系列类型更改为气泡：

// Set up the chart as usual
var svg = dimple.newSvg("#chartContainer", 800, 600);
var c = new dimple.chart(svg, data);
var totalAxis = c.addMeasureAxis("x", "total marks");
var categoryAxis = c.addCategoryAxis("y", ["topic label", "level"]);
// Add an additional measure axis. By passing an axis object rather than a position letter to the first parameter
// we create a composite axis which draws both measures on the same physical axis.
var medianAxis = c.addMeasureAxis(totalAxis, "median");
// Add the bar series
var totalSeries = c.addSeries("level", dimple.plot.bar, [categoryAxis, totalAxis]);
// Add a separate bar series for median
var medianSeries = c.addSeries(null, dimple.plot.bar, [categoryAxis, medianAxis]);
// By setting to not be stacked on a bar series it draws floating bars which work as markers
medianSeries.stacked = false;
c.draw();

这里有效：https://jsfiddle.net/w9tjqq6c/