如何使用自定义标签和按百分比定位的图表点制作Angular-chart时间轴？

Question

我正在尝试创建带有问题区域的图表，这可能会在浮动时间内发生。每个问题区域的功率从1到5，开始时间和结束时间。

我尝试制作自定义比例类型，但是无法编写某些有效的代码。是否可以使这种图表更简单？我制作了一个示例图像，说明它的外观。 https://i.imgur.com/MWKHMBn.png

angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
    $scope.labels = ['',''];
    $scope.data = ['',''];

    $scope.changeDataset = function(chart){
      let ctx = chart.chart.ctx;
      let gradient = ctx.createLinearGradient(500, 0, 100, 0);
      gradient.addColorStop(0, 'rgba(0, 5, 255, 0.6)');
      gradient.addColorStop(1, 'rgba(0, 118, 255, 0.6)');
      let gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);

      chart.chart.config.data.datasets[0].borderColor = gradientStroke;
      chart.chart.config.data.datasets[0].pointBorderColor = gradientStroke;
      chart.chart.config.data.datasets[0].pointBackgroundColor = gradientStroke;
      chart.chart.config.data.datasets[0].pointHoverBackgroundColor = gradientStroke;
      chart.chart.config.data.datasets[0].pointHoverBorderColor = gradientStroke;
      chart.chart.config.data.datasets[0].backgroundColor = gradient;
      chart.chart.config.data.datasets[0].fill = true;

      $scope.labels = ["START", "+01:20", "+01:42", "+02:28", "+03:20", "+05:28", "+05:58", "END"];
      $scope.data = [
        {t:'START',x:0, y:0},
        {t:'+01:20',x:2, y:0},
        {t:'+01:20',x:2, y:1}, 
        {t:'+01:42',x:8, y:1}, 
        {t:'+01:42',x:8, y:4}, 
        {t:'+02:28',x:24, y:4}, 
        {t:'+02:28',x:24, y:0}, 
        {t:'+03:20',x:38, y:0}, 
        {t:'+03:20',x:38, y:5}, 
        {t:'+05:28',x:59, y:5},
        {t:'+05:28',x:59, y:1},
        {t:'+05:58',x:60, y:1},
        {t:'+05:58',x:60, y:4},
        {t:'END',x:98, y:4}, 
        {t:'END',x:98, y:2}
      ];
    };

        $scope.$on('chart-create', function (evt, chart) {
            $scope.changeDataset(chart);
            chart.update();
        });


    $scope.options = {
        responsive: true,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "rgba(0,0,0,0.5)",
                        fontStyle: "bold",
                        //fontSize: fntSize,
                        beginAtZero: true,
                        min: 0,
                        max: 5,
                        stepSize: 1,
                        padding: 20,
                        callback: function(label, index, labels) {
                            switch (label) {
                                case 0:
                                    return 'None';
                                case 1:
                                    return 'Very Light';
                                case 2:
                                    return 'Light';
                                case 3:
                                    return 'Moderate';
                                case 4:
                                    return 'Strong';
                                case 5:
                                    return 'Severe';
                            }
                        }

                    }
                }],
                xAxes: [{
                    gridLines: {
                        drawTicks: true,
                        display: false
                    },
                    type: 'linear',
                    position: 'bottom',
                    ticks: {
                        min: 0,
                        max: 100,
                        stepSize: 25,
                        padding: 20,
                        fontColor: "rgba(0,0,0,0.5)",
                        fontStyle: "bold",
                        autoSkip: true,
                        maxRotation: 0,
                        minRotation: 0,

                    }
                }]
            },
            elements: {
                line: {
                    tension: 0
                }
            }
    };
});

我已经在JSF中工作了，最后我做了一下：https://jsfiddle.net/tqb4nz1g/7/

谢谢！