如何使用dosamigos\chartjs\ChartJs修改Yii2中的工具提示？ [英] How to Modify ToolTips in Yii2 using dosamigos\chartjs\ChartJs?

问题描述

我想使用

下面是我用来生成图表的代码：

 <？= ChartJs :: widget（[
'type'=> ‘pie’，
‘options’=> [
 height => 200，
宽度 => 600，
响应 =>是的，
动画 =>是，
‘barValueSpacing’=> 5，
 barDatasetSpacing => 1，
 //'tooltipFillColor'=>  rgba（0,0,0,0.8），
 //’multiTooltipTemplate’=> <％=值％>-<％=值％>，
 //字符串-单个工具提示的模板字符串，
 //'tooltipTemplate'=> <％if（label）{％><％= label％> ;:<％}％><％= value％>，
 
 //字符串-单个工具提示的模板字符串，
 //'multiTooltipTemplate'=> <％=价值％>，
 
工具提示 => [
的回调 => [
‘title’=> '*****我的自定义标签标题*****'
 
] 
]，
 
]，
'data'=> ; [
数据集 => [
 [
‘label’=>  Valor Inventario，
 data => [$ valorInventarioA，$ valorInventarioB，$ valorInventarioC]，
 backgroundColor => [
'rgba（255，99，132，0.2）'，
'rgba（54，162，235，0.2）'，
'rgba（255，206，86，0.2） '
]，
'borderColor'=> [
'rgba（255,99,132,1）'，
'rgba（54，162，235，1）'，
'rgba（255，206，86，1）'
] 
]，
 [
'label'=> ‘Cantidad Items’，
‘data’=> [$ grupoACount，$ grupoBCount，$ grupoCCount]，
 backgroundColor => [
'rgba（255，99，132，0.2）'，
'rgba（54，162，235，0.2）'，
'rgba（255，206，86，0.2） '
]，
'borderColor'=> [
'rgba（255,99,132,1）'，
'rgba（54，162，235，1）'，
'rgba（255，206，86，1）'
] 
] 
]，
 
 //当悬停不同的圆弧时，这些标签出现在图例和工具提示中。 [
'A'，
'B'，
'C'
] 
] 
]）;？> 
  

我将不胜感激

解决方案

要修改工具提示，可以使用回调工具（用于工具提示标签），例如：

  ... 
'clientOptions '=> [
'tooltips'=> [
的回调 => [
'label'=>新的JsExpression（ function（t，d）{
 var label = d.labels [t.index]; 
 var data = d.datasets [t.datasetIndex] .data [t.index]; 
 if（t.datasetIndex === 0）
返回标签+'：'+ data +'Products'; 
 else if（t.datasetIndex === 1）
返回标签+'：$'+ data.toLocaleString（）; 
}）
] 
]，
 ... 
]，
。 .. 
  

注意：

• 图表选项的正确属性名称是 clientOptions


• 应该使用JsExpression 类来编译JS回调函数

I want to change the tooltip of a Chart I made in Yii2 using dosamigos\chartjs\ChartJs which is based on Chart.js

My problem comes when I try to modify the Tooltip part of the chart. I am unable to achieve it. I have tried using multiTooltipTemplate, tooltips.callback and tooltipTemplate properties but I have not succeeded yet.

Below are 2 pictures of my Chart, What I want to achive is this:

1. The ToolTip of the inner chart (first image) should say something like this: "A: 119 Products" or "B: 230 Products" or "C: 540 products" depending on which section of the chart you are in (red,blue,yellow).

2. The Tooltip of the outer chart (second image) should say something like "A: $5,966,671.64" or "B: $1,120,022.50" or "C: $966,671.64" depending on which color you are in (red,blue,yellow).

Bellow is the code I am using to generate the chart in my view:

<?= ChartJs::widget([
 'type' => 'pie',
 'options' => [
     'height' => 200,
     'width' => 600,
     'responsive' => true,
     'animation'=> true,
     'barValueSpacing' => 5,
     'barDatasetSpacing' => 1,
     //'tooltipFillColor'=> "rgba(0,0,0,0.8)",
     //'multiTooltipTemplate' => "<%= Value %> - <%= value %>",
     // String - Template string for single tooltips,
     //'tooltipTemplate'=>  "<%if (label){%><%=label%>: <%}%><%= value %>",

     // String - Template string for single tooltips,
     //'multiTooltipTemplate'=>  "<%= value %>",

     'tooltips'=> [
      'callbacks'=> [
          'title' =>  '***** My custom label title *****'           

          ]
    ],

],
 'data' => [
       'datasets' => [
          [
              'label' => 'Valor Inventario',
              'data'=> [$valorInventarioA, $valorInventarioB, $valorInventarioC],
              'backgroundColor'=> [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)'
              ],
              'borderColor'=> [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ]
          ],
          [
                 'label' => 'Cantidad Items',
                'data'=> [$grupoACount, $grupoBCount, $grupoCCount],
             'backgroundColor'=> [
                 'rgba(255, 99, 132, 0.2)',
                 'rgba(54, 162, 235, 0.2)',
                 'rgba(255, 206, 86, 0.2)'
             ],
             'borderColor'=> [
                 'rgba(255,99,132,1)',
                 'rgba(54, 162, 235, 1)',
                 'rgba(255, 206, 86, 1)'
             ]
          ]
      ],

       // These labels appear in the legend and in the tooltips when hovering different arcs
       'labels' => [
           'A',
           'B',
           'C'
       ]
 ]
]);?>

I would appreciate any help

解决方案

To modify the tooltip, you can use a callback function for tooltips label, as such :

...
'clientOptions' => [
    'tooltips'=> [
         'callbacks'=> [
             'label'=> new JsExpression("function(t, d) {
                     var label = d.labels[t.index];
                     var data = d.datasets[t.datasetIndex].data[t.index];
                     if (t.datasetIndex === 0)
                     return label + ': ' + data + ' Products';
                     else if (t.datasetIndex === 1)
                     return label + ': $' + data.toLocaleString();
              }")
          ]
     ],
     ...
],
...

note :

• correct property name for chart options is clientOptions
• JsExpression class should be used to compile the JS callback function

这篇关于如何使用dosamigos\chartjs\ChartJs修改Yii2中的工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！