Chart.js不同的y轴，取决于选择选项中的图形

Question

我正在尝试根据新的json数据显示不同的y轴，这些数据从选择选项中被单击时传递。

这是我的代码：

var chartOptions = {
    scales: {
        xAxes: [{
            ticks: {
                display: true,
                autoSkip: true,
                maxTicksLimit: 25
            }
        }],
        yAxes: [{
            ticks: {
                beginAtZero: false,
                // Return an empty string to draw the tick line but hide the tick label
                // Return `null` or `undefined` to hide the tick line entirely
                userCallback: function (value, index, values) {


                    if (KpiName === "sales_growth_ytd") 
                    {
                        return value + '%';
                    }
                    else {

                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        // console.log($scope.selects);

                        for(var i = 0; i < $scope.selects.length; i++)
                        {

                              if($scope.selects[i].country_name === "Eire")
                            {
                                console.log($scope.selects[i].country_name);
                                return '€' + value;
                            }
                        }

                        for(var i = 0; i < $scope.selects.length; i++)
                        {

                            if($scope.selects[i].country_name === "UK")
                            {
                                console.log($scope.selects[i].country_name);
                                return '£' + value;
                            }
                        }
                    }
                }
            }
        }]
    },
    responsive: true,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontSize: 15,
                fontStyle: 'bold',
            },
            animation: {
                duration: 1 // general animation time
            },
            hover: {
                animationDuration: 0 // duration of animations when hovering an item
            },
            responsiveAnimationDuration: 0, // animation duration after a resize
            elements: {
                line: {
                    tension: 0 // disables bezier curves
                }
            },
        }
    }
};

基于在选择选项上使用的国家，即英国或EIRE，我想在Y轴上显示£或€的值。

我该怎么做？

谢谢

Answer 1

userCallback针对每个刻度运行。在您的代码中，当$scope.selects中的任何国家/地区的值与“爱尔兰”或“英国”匹配时，您将返回一个值。这是您想要的吗？

我对您的数据不太了解，但是如果country_name依赖于数据集而不是每个数据点，则可以在userCallback之外创建货币前缀变量并将其添加到刻度值上：

// Load dataset
// set currency prefix based on the data
...
userCallback: function (value, index, values) {
    if (KpiName === "sales_growth_ytd") 
    {
        return value + '%';
    }
    else {
        return currency_prefix + value;
    }
}