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

Question

我在 google 图表中有一个 100% 堆叠图表，我想将其转换为 dimplejs。

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

x 系列是 month/year 组合。

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

    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 的百分比轴基于 series/category 交集的值之和工作，因此只有在如您所说的那样，您对数据集进行 jank 并添加补充值时，它才会起作用。生成相反的值应该很容易：

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;

不过听起来这对您的用例不起作用，但它是一个选项。

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

dimplejs 100 percent stacked vertical bar with two values by date

javascript

dimple.js