Question

我在Laravel App中使用chart.js编写了这行代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

var ctx = document.getElementById("array_crawl_source_gap").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
    labels: ["Google Analytics", "Google Analytics", "Web", "Web"],
    datasets: [{

        data: [ {{ $array_crawl_source_gap[0] }}, {{ $array_crawl_source_gap[1] }}, 
        {{ $array_crawl_source_gap[2] }}, {{ $array_crawl_source_gap[3] }} ],
        backgroundColor: [
            'rgb(182, 197, 211)',
            'rgba(113, 152, 214, 1.0)',
            'rgb(182, 197, 211)',
            'rgba(113, 152, 214, 1.0)',
        ]

    }]
},
options: {
    responsive: false,
    legend: {
                display: false
            },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
            }
        }],
        xAxes: [{
            ticks: {
                beginAtZero:true,
                stepSize: 100
            }
        }],
    }
}
});

这是我的代码的输出。

预期输出：

基于代码，我如何只能在标签中制作一个Google Analytics（分析）和Web？当您将数据悬停在下图时，是否可以更改标签？任何想法/想法我该如何解决。先感谢您。

Answer 1

工具提示上的手册： https://www.chartjs.org/docs/latest/configuration/tooltip.html

工具提示中的HTML： Chart JS Show HTML in Tooltip

Answer 2

自定义工具提示位置：

Chart.Tooltip.positioners.custom = function(elements, position) {
    if (!elements.length)
      return false;

    var em = elements[0]._model;

    return {
      x: em.x-((em.x-em.base)/2),
      y: em.y+em.height/4
    }
}

添加了用于自定义工具提示标题的tooltipText，还显示了这些标题和标签的回调。 Y轴标签有偏移。

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Google Analytics", "", "Web", ""],
        tooltipText: ["Wild Quess", "Very Analytical", "Fine Prediction", "Bob's opinion"],
        datasets: [{
            data: [  250 , 260 , 270 , 280  ],
            backgroundColor: [
                'rgb(182, 197, 211)',
                'rgba(113, 152, 214, 1.0)',
                'rgb(182, 197, 211)',
                'rgba(113, 152, 214, 1.0)',
            ]

        }]
    },
    options: {
        responsive: false,
        legend: { display: false },
        tooltips: {
            enabled: true,
            displayColors: false,
            yPadding: 10,
            xPadding: 30,
            caretSize: 10,
            backgroundColor: 'rgba(240, 240, 240, 1)',
            titleFontColor: 'rgb(50, 100, 50)',
            bodyFontColor: 'rgb(50, 50, 50)',
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 1,
            cornerRadius: 0,
            yAlign: 'bottom',
            xAlign: 'center',
            callbacks: {
                title: function(tooltipItem, data) {
                    var title = data.tooltipText[tooltipItem[0].index];
                    return title;
                },
                label: function(tooltipItem, data) {
                    return tooltipItem.xLabel+' pages';
                }
            },
            position: 'custom',
        },
        scales: {
            yAxes: [{
                ticks: {
                    type: 'category',
                    labelOffset: 35,
                },
            }],
            xAxes: [{
                ticks: {
                    beginAtZero:true,
                    stepSize: 100
                }
            }],
        },
    }
});

当您将数据悬停在Chart.js中时，如何更改标签名称？

2 个答案: