Question

我有一个用Chart.js创建的条形图。我从PHP Arrays中获取数据和标签，如下所示：

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, ...
}

然后我使用以下代码创建图表：

$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);

到目前为止这个工作正常，但我需要在相应的工具提示中显示一个数组。所以这行代码需要改变：

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

首先，我尝试在其中显示一个PHP变量，如下所示：

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

编辑：我似乎需要像这样显示变量：

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

但是，我如何遍历数组以显示相应工具提示中的每个元素？

我的代码可能不那么干净，所以我很欣赏你的Tipps和帮助，因为我还在学习编写干净的代码。

Answer 1

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

cpc_label是我的工具提示标题的javascript数组。使用此代码，它可使数组显示相应工具提示中的每个元素。

希望这可以解决您的问题

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

1 个答案: