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

Question

我在 google 图表中有一个 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;

然而，这听起来似乎不适用于您的用例，但它是一个选项。