Question

的Chart.js更改我在Yii2中制作的图表的工具提示

当我尝试修改图表的工具提示部分时出现问题。我无法实现它。我尝试过使用multiTooltipTemplate，tooltips.callback和tooltipTemplate属性，但我还没有成功。

以下是我的图表中的2张图片，我想要的是：

内部图表的工具提示（第一张图片）应该是这样的：“A：119产品”或“B：230产品”或“C：540产品”，具体取决于图表的哪个部分（红色，蓝色，黄色）。
外部图表的工具提示（第二张图片）应该说“A：$ 5,966,671.64”或“B：$ 1,120,022.50”或“C：$ 966,671.64”，具体取决于你所处的颜色（红色，蓝色，黄色））。

Bellow是我用来在我的视图中生成图表的代码：

<?= 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'
       ]
 ]
]);?>

我将不胜感激任何帮助

Answer 1

要修改工具提示，您可以使用callback function工具提示标签，如下所示：

...
'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();
              }")
          ]
     ],
     ...
],
...

注意：

图表选项的正确属性名称为clientOptions
JsExpression类应该用于编译JS回调函数

如何使用dosamigos \ chartjs \ ChartJs修改Yii2中的工具提示？

1 个答案: