Question

我正在使用ChartJS来显示一些数据，并且在格式化方面遇到了一些问题，但是我不确定是什么问题。我想通过它们的标签来识别图形条，以供进一步使用，但是当悬停在上方时，每个条都将显示整个标签列表，而不仅仅是单个条的标签。

这是显示问题的JSFiddle。

var datalist = [{
    label: ['one','two','three','four','five','six'],
  data: [10, 13, 8, 15, 6, 3],
  backgroundColor: ['red', 'orange', 'yellow','green','blue','purple'],
    borderColor: 'black',
  borderWidth: 1
    },
    {
  label: ['seven','eight','nine','ten','eleven','twelve'],
  data: [10, 13, 8, 15, 6, 3],
  backgroundColor: ['red', 'orange', 'yellow','green','blue','purple'],
    borderColor: 'black',
  borderWidth: 1
  }
];

console.log(datalist);
var ctx = document.getElementById("chart");

var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["R", "I", "S", "K", "T", "S"],
    datasets: datalist
  },
  options: {
    onClick: function(e) {
        console.log("test");
    },
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    },
    legend: {
        onClick: function(e) {
        console.log("click ignored")
        e.stopPropagation();
      }
    }
  }
});

http://jsfiddle.net/pa9ehnrb/27/

我正在考虑使用类似于在该代码笔中找到的方法来生成图形的方法：

var ctx = document.getElementById('chart');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Risk Level'],
    datasets: [
      {
        label: 'Low',
        data: [67.8],
        backgroundColor: '#D6E9C6',
      },
      {
        label: 'Moderate',
        data: [20.7],
        backgroundColor: '#FAEBCC',
      },
      {
        label: 'High',
        data: [11.4],
        backgroundColor: '#EBCCD1',
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  }
});

https://codepen.io/travishorn/pen/kkVKJG

但是，我不确定如何将该方法从单个条形转换为多个条形。目前，我正在使用一系列循环遍历我的数据，并将其转换为包含0的2d数组，其中不应有条形。数据集最初来自数据库查询。

作为补充说明，我试图找出一种有效的方法来添加一种过滤数据的方法，因为随着创建的条形越来越多，所显示的实际数据将大大增加。我正在考虑一个ajax请求，该请求会修改我的数据集并重新显示数据，但是我可以将其集成到已构造的图形中吗，还是需要在附近放置一个单独的html元素以传递请求的数据范围？

EX）

[1,2,3,4,3,3,2,1]

变成

[1,1,0]
[2,2,0]
[3,3,3]
[4,0,0]

任何帮助或指针将不胜感激！

使用带有分组标签的图表js堆叠条形图问题

0 个答案: