基于甜甜圈char.js百分比的价值

时间:2017-09-21 08:44:10

标签: spring

我想在我的应用程序中显示一个多边形图表的数字。让我们举例来说,这是基于机场的一​​些航班。

在接下来的4小时内有800个航班。我想要有4个显示数据的圆环图。

  • 在接下来的30分钟内准备好的航班数量
  • 在接下来的5分钟内准备好的航班数量
  • 现在准备好的航班数量
  • 延迟的航班数量

我使用chart.js创建甜甜圈但据我所知,我只能使用静态数字:

this.data = {
    datasets: [
        {
            data: [
                300,
            ],
            backgroundColor: [
                '#FF6384',
            ],
            hoverBackgroundColor: [
                '#FF6384',
            ]
        }]
};

这填补了整个图表。我正在考虑解决这个问题的两种方法:

  1. Chart.js支持某种最大值(800),并根据实际数字(300)根据该比例填充图表。
  2. 我可以在数据数组中使用2个值。一个是实际的航班数(300),另一个是最大值(500)= 800的差异。
  3. 但是我不能在数组中使用变量值:

    this.data = {
        datasets: [
            {
                data: [
                    this.number1,
                    this.number2
                ],
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB'
                ],
            }]
    };
    

    未定义。

1 个答案:

答案 0 :(得分:0)

通过将this.data对象拉出构造函数并在函数中构建它,我可以计算出正确的值。

var scripts = {
    'common': {
        init: function() {        

        },
        finalize: function() {

        }
    },
    'home': {
        init: function() {

        },
        finalize: function() {

        }
    },
};

因此可能需要将其设为一个类,以便将其用于多个值。