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

标签 javascript php arrays chart.js

我有一个使用 Chart.js 创建的条形图。我从 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, ...
}

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

$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 %>"

但是如何循环遍历数组以在相应的工具提示中显示每个元素?

我的代码可能不是那么干净,所以我感谢您的提示和帮助,因为我仍在学习编写干净的代码。

最佳答案

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

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

希望这能解决您的问题

关于javascript - 在 Chart.js 工具提示中显示 PHP 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32634678/

相关文章:

JavaScript:如果 IE9 处于 IE7 或 IE8 兼容模式,我可以检测到它吗?

javascript - chrome 浏览器不显示单选按钮或选择框

php - 刷新时 JavaScript 不加载

javascript - Angular 2 中推荐的服务架构

javascript - 将乘法金额结果限制为小数点后 2 位

php - Laravel 模型中的主键不起作用

php - 同时插入两个共享相同id的表

java - 如何将 kotlin 集合作为可变参数传递?

c++ - 如何翻转数组的一部分?

java - 如何将 HashMap 转换为条目数组