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;

然而，听起来这对您的用例不起作用，但它是一种选择。