Chart.js版本2:将前缀或后缀添加到工具提示标签

wbgh16ku  于 2022-11-06  发布在  Chart.js
关注(0)|答案(9)|浏览(203)

在Chart.js V1.0中,我会添加tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>"来添加一个欧元符号作为工具提示标签的前缀。但是,在V2中不再起作用了。有人知道完成此操作的新方法吗?我似乎找不到。
非常感谢!

cwxwcias

cwxwcias1#

在V2.0中,tooltipTemplate选项已被弃用。您可以使用回调来修改显示的工具提示。回调here的用法示例,您可以在 Chart.defaults.global.tooltips 下的文档中找到可能的回调
在您的情况下,我会执行以下操作:

window.myLine = new Chart(chart, {
    type: 'line',
    data: lineChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' €';
                    }
                }
            },
     }       
  });

别忘了设置HTML meta标记:

<meta charset="UTF-8">
7dl7o3gd

7dl7o3gd2#

除了iecs的答案之外,如果你想返回确切的默认文本并添加更多的内容(比如你的例子中的€符号),请使用以下语法:

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €';
                }
            }

        }
    }
});
x4shl7ld

x4shl7ld3#

看看是否有帮助:

var config = {
            options: {
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; },
                        label: function (tooltipItem, data) {
                            var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                            return amount + ' / ' + total + ' ( ' + parseFloat(amount * 100 / total).toFixed(2) + '% )';
                        },
                        //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
                    }
                },
            }
        };
wnavrhmk

wnavrhmk4#

这套“标签+价值+ €”

options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
            }
        }
    }
}
uujelgoq

uujelgoq5#

如果您有一个堆积条形图(我假设是堆积折线图),并且您希望将单个条形图中包含的所有数据点都设置为货币符号格式,则可以执行以下操作:

tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItems, data) {
                return '$' + tooltipItems.yLabel;
            }
        }
    },

记下mode的值。
如果要更好地控制工具提示,例如,在标签显示在图表图例中时将其包括在内,则可以执行以下操作:

tooltips: {
        mode: 'single',  // this is the Chart.js default, no need to set
        callbacks: {
            label: function (tooltipItems, data) {
                var i, label = [], l = data.datasets.length;
                for (i = 0; i < l; i += 1) {
                    label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index];
                }
                return label;
            }
        }
    },
ctehm74n

ctehm74n6#

只是更新了@Luc Lérot的答案。我遇到了同样的问题,他的代码帮助我解决了这个问题,但没有修复它,我不得不修改它来为我工作。使用Chart.js版本2.6.0

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
               callbacks: {
                   label: function (tooltipItems, data) {
                       return data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' €';
                   }
              }

        }
    }
});
hgqdbh6s

hgqdbh6s7#

为了对代码进行一般化,让我们对数据集使用unitPrefixunitSuffix,例如:

datasets: [
    {
        label: 'Loss Rate',
        data: [],
        unitSuffix: "%",
    },
    {
        label: 'Price',
        data: [],
        unitPrefix: "$",
    },

然后我们可以得到这个代码:

options: {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                let dataset = data.datasets[tooltipItem.datasetIndex];
                let blocks = [];
                if (dataset.label) {
                    blocks.push(${dataset.label} + ':');
                }
                if (dataset.unitPrefix) {
                    blocks.push(dataset.unitPrefix);
                }
                blocks.push(dataset.data[tooltipItem.index])
                if (dataset.unitSuffix) {
                    blocks.push(dataset.unitSuffix);
                }
                return blocks.join(' ');
            },
        },
    },
},
au9on6nz

au9on6nz8#

随着我们沿着发布链继续前进,Chart.js v3.X中的答案再次发生了变化,更新了选项API。
添加温度单位的示例如下:

const options = {
    plugins: {
        tooltip: {
            callbacks: {
                label: (item) =>
                    `${item.dataset.label}: ${item.formattedValue} °C`,
            },
        },
    },
}
kq0g1dla

kq0g1dla9#

Chart.js版本3.9.1

const options: ChartOptions = {
  plugins: {
    tooltip: {
      callbacks: {
        label: ({ label, formattedValue }) => `${label}:${formattedValue}g`
      }
    }
  }
}

相关问题