标签颜色与backgroundColor相同-ChartJS

Question

我有一个ChartJS

我的标签颜色现在是蓝色。我希望我的标签颜色与背景颜色匹配。

应该是：

紫色

在这种情况下

。

这是我当前的代码和选项。

var ajax = $.ajax({url: '/visitor/summary/country'});
ajax.done(function (response) {

    countryKeys = [];
    countryValues = [];

    $.each(response, function(key,val) {
        //console.log(key+val);
        countryKeys.push(key);
        countryValues.push(val);
    });

    let chart5 = document.getElementById('chart5').getContext('2d');
    let chart5Chart = new Chart(chart5, {
        type:'doughnut', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
        data:{
            labels:countryKeys,
            datasets:[{
                label:'Count',
                data:countryValues,
                backgroundColor:colors,
                borderWidth:1,
                borderColor:'#777',
                hoverBorderWidth:3,
                hoverBorderColor:'#000',
                scaleStepWidth: 1,
            }]
        },
        options:{
            title:{
                display:true,
                text:'country'
            },
            legend:{
                display:false,
                position:'right',
                labels:{
                    fontColor:'#000'
                }
            },
            tooltips: {
                callbacks: {
                    title: function(tooltipItem, data) {
                        return data['labels'][tooltipItem[0]['index']];
                    },
                    label: function(tooltipItem, data) {
                        return data['datasets'][0]['data'][tooltipItem['index']];
                    }
                },
                titleFontSize: 20,
                titleFontColor: '#0066ff',
                bodyFontColor: '#FFFFFF',
                bodyFontSize: 24,
                displayColors: false
            }
        }
    });

});

Answer 1

您没有工具提示标题颜色的回调，因此无法通过简单的方法实现。

一个选择是使用labelTextColor，但这会更改标题和值（full JSBin example here）。

tooltips: {
  callbacks: {
    labelTextColor: function(tooltipItem, chart) {
      return colors[tooltipItem.index];
    }
  },
  titleFontSize: 20,
  bodyFontSize: 24,
  displayColors: false
}

另一个选项是自定义工具提示。 Here is a great answer to a similar question with a very nice codepen example.