简体   繁体   English

在Chart.js工具提示中显示PHP数组

[英]Display PHP Array in Chart.js tooltip

I have a Bar Chart created with Chart.js. 我有一个用Chart.js创建的条形图。 I get the data and labels from PHP Arrays which look like this: 我从PHP数组中获取数据和标签,如下所示:

for ($i = 0; $i < count($mydata); $i++) {
    $labels .= "\"".$mylabels[$i] ."\"". ",\n" // "Label 1", "Label 2", "Label 3", ...
    $data .= $mydata[$i] . ",\n" // 34, 12, 64, 12, ...
}

I then create the Chart using this code: 然后,我使用以下代码创建图表:

$chart = '
<script>
var data = {
    labels: ['.$labels.'],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.75)",
            strokeColor: "rgba(220,220,220,1)",
            highlightFill: "rgba(221, 240, 242, 1)",
            highlightStroke: "rgba(204, 231, 234, 1)",
            data: ['.$data.']
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");

new Chart(ctx).Bar(data, {
    scaleLabel : "<%= value + \" €\" %>",
    tooltipTemplate: "<%= \"Project: \" + label %>",
});

</script>';
print($chart);

This works fine so far but I need to display an Array inside the respective tooltip. 到目前为止,这工作正常,但我需要在相应的工具提示中显示一个数组。 So this line of code needs to be changed: 因此,这行代码需要更改:

tooltipTemplate: "<%= \"Project: \" + label %>"

First I tried to display a PHP Variable inside it which looks like this: 首先,我尝试在其中显示一个PHP变量,如下所示:

tooltipTemplate: "<%= '. $test .' \"Project: \" + label %>"

EDIT: It seems I need to display the variable like this: 编辑:似乎我需要显示这样的变量:

tooltipTemplate: " '. $test .'<%= \"Project: \" + label %>"

But how do I loop through an Array to display each element in the respective tooltip? 但是,如何遍历数组以显示相应工具提示中的每个元素?

My code is probably not so clean so I appreciate Tipps and Help from you as I am still learning to write clean code. 我的代码可能不太干净,因此我仍在学习编写干净的代码,因此感谢您提供的Tipps和帮助。

tooltips: {
    enabled: true,
    mode: 'single',
    callbacks: 
      {
        title: function(tooltipItem, data) 
        {
            return cpc_label[tooltipItem[0]['index']];
        },
      }
},

cpc_label is my javascript array of tooltip titles. cpc_label是我的工具提示标题的javascript数组。 Using this code it makes the array display each element in the respective tooltip. 使用此代码,它可使数组显示相应工具提示中的每个元素。

Hope this solves your issue 希望这能解决您的问题

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM