javascript - 如何在 Chart.js 的工具提示中键入字符串?

标签 javascript laravel chart.js

我想在工具提示的结果数据中添加“%”符号。我们如何定制它?

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['@lang('home/main.korea')', '@lang('home/main.japan')'],
            datasets: [{
                label: [

                ],
                data: [
                    {!! $koreaPercent !!} ,
                    {!! $japanPercent !!} ,
                ],
                backgroundColor: [
                    'red',
                    'blue',
                ],
            }]
        },
        options: {
        }
    });

</script>

我认为我们需要转换数据数组中的选项。

enter image description here

最佳答案

这样的事情应该可以解决您的问题:

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['@lang('home/main.korea')', '@lang('home/main.japan')'],
            datasets: [{
                label: [

                ],
                data: [
                    {!! $koreaPercent !!} ,
                    {!! $japanPercent !!} ,
                ],
                backgroundColor: [
                    'red',
                    'blue',
                ],
            }]
        },
        options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + tooltipItems.xLabel + " %";
            }
        }
    });

</script>

这是一个使用不同数据的工作示例,因为我不知道您如何使用您的图表:https://jsfiddle.net/mateusjunges/f8x394va/2/

希望对您有所帮助。

关于javascript - 如何在 Chart.js 的工具提示中键入字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56509059/

相关文章:

javascript - 如何过滤 belongsToMany 关系?拉维尔 5.4

laravel - Laravel 中不能使用 Controller 名称,必须使用命名空间

php - 使用 Redis 的速率限制 laravel 队列

php - 是否可以将整个网站包装在 iframe 中?

javascript - 从 Ruby on Rails 输出散列数组到 chart.js

javascript - CSS 隐藏 div 与图像

javascript - uiwebview注入(inject)javascript调整字体大小

javascript - 在 Angular 4 上使用 Chart.js

javascript - Chartjs 上的图例出现问题

javascript - 尝试使用链接来创建换行文本