从对象到创建图表的数据集

Question

通过一个api调用，我有一个对象，我试图用它来创建一个带有CHART.XKCD的图表。

创建一个条形图是可行的，因为我只有一个键，但是我不知道如何得到有多个键的堆叠条形图。

有人能告诉我如何做到这一点吗？

​

const result  = {
  'title': 'What a show',
  'xlabel': 'Month',
  'data': {
    'labels': [
      '01',
      '02',
      '04'
    ],
    'datasets': {
      'PinTotalMonth': [
        0,
        0,
        272
      ],
      'BankTotalMonth': [
        2195,
        930,
        '786.5'
      ],
      'ContantTotalMonth': [
        0,
        0,
        '264.25'
      ]
    }
  },
  'ylabel': 'Count'
};


var ylabel = result.ylabel;
var xlabel = result.xlabel;
var labels = result.data.labels;
var mydata = result.data.datasets;
var label = "Data";

$.each(result.data.datasets, function(key, value) {
  console.log("Data: " + "type: " + key + " en value: " + value);
  // alert(key + ': ' + value);
});

const svgStackedBar = document.querySelector('.stacked-bar-chart');
new chartXkcd.StackedBar(svgStackedBar, {
  ylabel: ylabel,
  xlabel: xlabel,
  data: {
    labels: labels,
    datasets: [{
      label: label,
      data: mydata
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1.12/dist/chart.xkcd.min.js"></script>

<svg class="stacked-bar-chart"></svg>

​

Answer 1

有很多问题。

其中一个问题是数据中的奇怪字符串，而不是浮点数。

我映射了数据集以适合documentation

​

const result = {
  'title': 'What a show',
  'xlabel': 'Month',
  'data': {
    'labels': [
      '01',
      '02',
      '04'
    ],
    'datasets': {
      'PinTotalMonth': [
        0,
        0,
        272
      ],
      'BankTotalMonth': [
        2195,
        930,
        786.5
      ],
      'ContantTotalMonth': [
        0,
        0,
        264.25
      ]
    }
  },
  'ylabel': 'Count'
};


var ylabel = result.ylabel;
var xlabel = result.xlabel;
var labels = result.data.labels;
var mydata = result.data.datasets;
var label = "Data";

const data = {
  labels: labels,
  datasets: Object.keys(result.data.datasets).map(key => ({
    label: key,
    data: result.data.datasets[key]
  }))
}


const svgStackedBar = document.querySelector('.stacked-bar-chart');
new chartXkcd.StackedBar(svgStackedBar, {
  ylabel: ylabel,
  xlabel: xlabel,
  data: data
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1.12/dist/chart.xkcd.min.js"></script>

<svg class="stacked-bar-chart"></svg>

​