Question

我尝试过堆积图表http://bl.ocks.org/mbostock/3885211的例子，我喜欢它。我只是不确定如何自定义它。例如，如果我需要更改它们的堆叠顺序。有时数据的排序顺序不合理。另外，如何更改颜色？

谢谢！

Answer 1

由于您正在使用D3，您可能会发现使用更高级别的库来操作图表（称为c3js）会更容易一些。这是一个例子：http://c3js.org/samples/chart_area_stacked.html

堆叠的顺序取决于您对列数组的排序方式：

var chart = c3.generate({
  data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 120],
        ['data2', 130, 100, 140, 200, 150, 50]
      ],
    types: {
        data1: 'area-spline',
        data2: 'area-spline'
        // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
           },
    groups: [['data1', 'data2']]
        }
    });

这是一个更大的数据集：

[
  {
    "projectDate": "2015-10-29",
    "status": {
      "Backlog": 23
    }
  },
  {
    "projectDate": "2015-10-29",
    "status": {
      "Backlog": 23
    }
  },
  {
    "projectDate": "2015-10-30",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-30",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-31",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-31",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-11-01",
    "status": {
      "Backlog": 44,
      "In Progress": 11
    }
  },
  {
    "projectDate": "2015-11-01",
    "status": {
      "Backlog": 44,
      "In Progress": 11
    }
  },
  {
    "projectDate": "2015-11-02",
    "status": {
      "Backlog": 39,
      "In Progress": 19
    }
  },
  {
    "projectDate": "2015-11-02",
    "status": {
      "Backlog": 39,
      "In Progress": 19
    }
  },
  {
    "projectDate": "2015-11-03",
    "status": {
      "In Progress": 20,
      "Backlog": 40,
      "Selected for Development": 1
    }
  },
  {
    "projectDate": "2015-11-03",
    "status": {
      "In Progress": 20,
      "Backlog": 40,
      "Selected for Development": 1
    }
  },
  {
    "projectDate": "2015-11-04",
    "status": {
      "In Progress": 21,
      "Backlog": 49
    }
  },
  {
    "projectDate": "2015-11-04",
    "status": {
      "In Progress": 21,
      "Backlog": 49
    }
  },
  {
    "projectDate": "2015-11-05",
    "status": {
      "Backlog": 38,
      "In Progress": 31,
      "Merge Candidate": 5
    }
  },
  {
    "projectDate": "2015-11-05",
    "status": {
      "Backlog": 38,
      "In Progress": 31,
      "Merge Candidate": 5
    }
  },
  {
    "projectDate": "2015-11-06",
    "status": {
      "UX Review": 6,
      "In Progress": 27,
      "Selected for Development": 2,
      "Backlog": 35,
      "Merge Candidate": 2
    }
  },

Answer 2

您可以使用以下设置尝试c3j：

    data: {
    columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 333, 100, 140, 200, 150, 50],
        ['data3', 130, 150, 200, 300, 200, 100]
    ],
    type: 'bar',
    // Change to 'line', 'spline', 'step', 'area', 'area-step' for getting likely type
    groups: [
        ['data1', 'data2', 'data3']
    ]
},
bar: {
    width: {
        ratio: 1
    }
}

例如，您的数据来自json - https://jsfiddle.net/ea54hxgy/

但是你需要将你的json数据处理成c3js格式（写一个函数）

自定义d3堆积面积图

2 个答案: