ChartJS X 轴标签中的新行 ' ' 或使用 ChartJS V2 在图表或工具提示周围显示更多信息

2022-01-22 00:00:00 javascript chart.js

我正在使用 chart.js (V2) 来尝试构建一个条形图，该条形图向用户提供更多信息，而无需将鼠标悬停在任何地方或单击任何地方.我提供了两个示例来说明我希望如何编辑图表.

I'm using chart.js (V2) to try to build a bar chart that has more information available to user without having to hover over or click anywhere. I've provided two examples of how I hope to edit my chart.

我希望实现的两个编辑版本

可以看出，我希望在(某处)标签之外放置一些额外的信息.我曾希望通过在标签中添加 "，我可能能够获得与选项 A 类似的我正在寻找的内容.

As can be seen, I hope to place (somewhere), some extra information outside of the labels. I had hope that by adding ' ' to the labels I might have been able to get what I was looking for similar to option A.

提供了一些编辑过的代码:

Some edited code is provided blow:

var barChartData = {

        labels: playerNames,
        datasets: [{
            label: 'Actual Score/Hour',
            backgroundColor: "rgba(0, 128, 0,0.5)",
            data: playerScores
          }, {
            label: 'Expected Score/Hour',
            backgroundColor: "rgba(255,0,0,0.5)",
            data: playerExpected
        }]
    };
function open_win(linktosite) {
           window.open(linktosite)
      }
        canvas.onclick = function(evt){
            var activePoints = myBar.getElementsAtEvent(evt);
            console.log(activePoints);
            linktosite = 'https://www.mytestsite.com/' + activePoints[1]['_model']['label'];
            open_win(linktosite);
}; 
window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title:{
                    display:true,
                    text:"Player Expected and Actual Score per Hour"
                },
                tooltips: {
                    mode: 'label'
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: false,
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                },
                animation: {
                    onComplete: function () {
                        var ctx = this.chart.ctx;
                        ctx.textAlign = "center";
                        Chart.helpers.each(this.data.datasets.forEach(function (dataset) {

                            Chart.helpers.each(dataset.metaData.forEach(function (bar, index) {
                                // console.log("printing bar" + bar);
                                ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10);
                                }),this)
                                }),this);
                    }
                }
            }
        });
        // Chart.helpers.each(myBar.getDatasetMeta(0).data, function(rectangle, index) {
        // rectangle.draw = function() {
        //     myBar.chart.ctx.setLineDash([5, 5]);
        //     Chart.elements.Rectangle.prototype.draw.apply(this, arguments);
        //     }
        // }, null);            
    };

在这一点上，我对在栏的任何位置都有额外数据感到满意.任何帮助，将不胜感激.谢谢~

At this point I'd be satisfied with having the extradata anywhere on the bar. Any help would be appreciated. Thanks~

推荐答案

Chart.js v2.1.5 允许使用嵌套数组的多行标签(v2.5.0 修复了雷达图):

Chart.js v2.1.5 allows for multi-line labels using nested arrays (v2.5.0 fixes it for radar graphs):

...
data: {
    labels: [["Jake", "Active: 2 hrs", "Score: 1", "Expected: 127", "Attempts: 4"], 
             ["Matt", "Active: 2 hrs", "Score: 4", "Expected: 36", "Attempts: 4"]],
    ...

但是，这确实意味着您必须预先计算标签值.

However, this does mean that you will have to pre-calculate the label values.

相关文章