ChartJS选项:添加单独的标题选项时,无法保留选项可变的自定义标签字体大小

时间:2019-02-07 18:36:09

标签: javascript chart.js

我正在尝试遵循DRY方法,目前有条形图。我创建了一个名为“ chartOptions”的变量,其中包含我的图例,x和y轴标签字体大小首选项。我想为每个条形图保留我的“ chartOption”设置,但是要让我对此图有特定的标题(因为我计划添加其他唯一命名的图)。

目前看来,无论我放置这些选项的顺序如何,它都会显示标题并将标签大小重置为默认值。从ChartJS的Options规范中,我不清楚这是否是一个限制问题-仅允许一个图表“ options”参数/是否允许嵌套,或者是否需要在全局定义下或其他地方查看。 (我都尝试过-但可能没有正确实现?)

对此表示任何想法或意见,我们将不胜感激。我已附上我的chartjs代码-附有一张演示我所经历的图表。

// This variable stores the global configurations for Chart Options
// such as font-sizes, axes scales...etc.
var chartOptions = {
legend: {
    display: true,
    labels: {
        fontSize: labelFontSize
    }
},
scales: {
    xAxes: [{
        scaleLabel: {
            display: true,
            labelString: 'Quarter',
            fontSize: labelFontSize
        },
        ticks: {
            fontSize: tickFontSize
        }
    }],
    yAxes: [{
        scaleLabel: {
            display: true,
            labelString: 'Number of Calls', 
            fontSize: labelFontSize
        },
        ticks: {
            beginAtZero: true,
            fontSize: tickFontSize
        }
    }]
}
}


// Create Bar chart
var barChart1 = document.getElementById("barChart1").getContext("2d");
var supportCallsChart1 = new Chart(barChart1, {
type: 'bar',
data: {
    labels: ["Q1-18", "Q2-18"],
    datasets: [{
        label: "test dataset",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [5, 10],
    }]

},
options: chartOptions, // having the options title below overwrites my x/y axes labels & font sizes
options: { // removing this title option will allow chartOptions settings to occur     
title: {
    display: true,
    text: "2018 Test Title",
    fontSize: chartTitleFontSize
    }
}   
});

0 个答案:

没有答案