dimplejs 100% 堆叠垂直条，按日期显示两个值

Question

我在谷歌图表中有一个 100% 堆积的图表，我想将其转换为 dimplejs。

这两个 y 值是两个等于 100% 的百分比值的组合，但我只有一个百分比值，第二个应该是完成另一部分等于 100% 的条形

x 系列是月/年的组合。

这是一个功能尝试，但请注意，我实际上是在欺骗我的数据以匹配示例所期望的。

    var svg = dimple.newSvg("#chartContainer", 900, 400);
    var data = [
        {'YRMO': '01-01-2014', 'halfit': 'first', 'Percent':'24'},
        {'YRMO': '02-01-2014', 'halfit': 'first', 'Percent':'76'},
        {'YRMO': '03-01-2014', 'halfit': 'first', 'Percent':'31'},
        {'YRMO': '04-01-2014', 'halfit': 'first', 'Percent':'69'},
        {'YRMO': '05-01-2014', 'halfit': 'first', 'Percent':'20'},
        {'YRMO': '06-01-2014', 'halfit': 'first', 'Percent':'70'},
        {'YRMO': '07-01-2014', 'halfit': 'first', 'Percent':'28'},
        {'YRMO': '08-01-2014', 'halfit': 'first', 'Percent':'70'},
        {'YRMO': '01-01-2014', 'halfit': 'second', 'Percent':'76'},
        {'YRMO': '02-01-2014', 'halfit': 'second', 'Percent':'24'},
        {'YRMO': '03-01-2014', 'halfit': 'second', 'Percent':'69'},
        {'YRMO': '04-01-2014', 'halfit': 'second', 'Percent':'31'},
        {'YRMO': '05-01-2014', 'halfit': 'second', 'Percent':'80'},
        {'YRMO': '06-01-2014', 'halfit': 'second', 'Percent':'30'},
        {'YRMO': '07-01-2014', 'halfit': 'second', 'Percent':'72'},
        {'YRMO': '08-01-2014', 'halfit': 'second', 'Percent':'30'},
        ];

  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(65, 45, 505, 315)
  myChart.addCategoryAxis("x", "YRMO");
  myChart.addPctAxis("y", "Percent");
  myChart.addSeries("halfit", dimple.plot.bar);
  myChart.addLegend(200, 10, 380, 20, "right");
  myChart.draw();

而我正在努力解决的问题是如何让这项工作发挥作用：

    var data = [
        {'YRMO': '01-01-2014', 'Percent':'24'},
        {'YRMO': '02-01-2014', 'Percent':'76'},
        {'YRMO': '03-01-2014', 'Percent':'31'},
        {'YRMO': '04-01-2014', 'Percent':'69'},
        {'YRMO': '05-01-2014', 'Percent':'20'},
        {'YRMO': '06-01-2014', 'Percent':'70'},
        {'YRMO': '07-01-2014', 'Percent':'28'},
        {'YRMO': '08-01-2014', 'Percent':'70'}];

My JSFiddle....

Answer 1

Dimple 的百分比轴基于该系列/类别交集的值的总和，因此它仅在如您所说的那样使用数据集并添加补码值时才有效。生成相反的值应该很容易：

var data = [
    {'YRMO': '01-01-2014', 'Percent':'24'},
    {'YRMO': '02-01-2014', 'Percent':'76'},
    {'YRMO': '03-01-2014', 'Percent':'31'},
    {'YRMO': '04-01-2014', 'Percent':'69'},
    {'YRMO': '05-01-2014', 'Percent':'20'},
    {'YRMO': '06-01-2014', 'Percent':'70'},
    {'YRMO': '07-01-2014', 'Percent':'28'},
    {'YRMO': '08-01-2014', 'Percent':'70'}];
//add property for first half (or put directly in data if possible)
data.forEach(function(row){
   row.halfit = 'first';
});

//create second half
var opposites = data.map(function(row){
    return { "YRMO" : row.YRMO,
        "Percent": (100 - Number(row.Percent)),
        "halfit" : "second"
       };
});
//combine the two - concat returns a new array
var chartData = data.concat(opposites);
var myChart = new dimple.chart(svg, chartData);
...
//add order rule so original data is on bottom
var series = myChart.addSeries("halfit", dimple.plot.bar);
series.addOrderRule(['first', 'second']);

否则，您可以通过使用锁定在 100 的测量轴来绘制没有相反条的原始值（这只会起作用，因为您的值已经是百分比）：

  var yAxis = myChart.addMeasureAxis("y", "Percent");
 yAxis.overrideMax = 100;

不过，这听起来不适用于您的用例，但这是一种选择。