Question

我正在尝试使用ChartJS创建气泡图。数据来自mysql通过php，然后发送到库。

我从mysql获得的数据可以是从1个结果到30个结果（或更多）的任何地方。基于这个数量，我想为每个数据集插入一个新的数据集（一个气泡）。我似乎无法构造必要的代码来动态插入它。

这是我到目前为止的代码：

//Set the data for the interests from search behavior in bubble chart
$interestValues = array();
foreach ($interestsall as $interest) {
    $data = array('x' => '28','y' => '48','r' => '40');
    $json_data = json_encode($data);
    $arrDatasets = array('label' => $interest->name,'backgroundColor' => "#ff6384", 'hoverBackgroundColor' => "#ff6384", 'data' => $json_data);
    array_push($interestValues, $arrDatasets);
}

$json_interestDatasets = json_encode($interestValues);

感兴趣的var_dump看起来像这样：

D:\wamp\www\codeigniter\application\views\dashboard\statistics\statistics.php:527:
array (size=30)
  0 => 
    array (size=4)
      'label' => string 'Begeleiding' (length=11)
      'backgroundColor' => string '#ff6384' (length=7)
      'hoverBackgroundColor' => string '#ff6384' (length=7)
      'data' => string '{"x":"28","y":"48","r":"40"}' (length=28)
  1 => 
    array (size=4)
      'label' => string 'Communicatie' (length=12)
      'backgroundColor' => string '#ff6384' (length=7)
      'hoverBackgroundColor' => string '#ff6384' (length=7)
      'data' => string '{"x":"28","y":"48","r":"40"}' (length=28)
  2 => 
    array (size=4)
      'label' => string 'Administratie' (length=13)
      'backgroundColor' => string '#ff6384' (length=7)
      'hoverBackgroundColor' => string '#ff6384' (length=7)
      'data' => string '{"x":"28","y":"48","r":"40"}' (length=28)
  3 => 
    array (size=4)
      'label' => string 'Sport en Spel' (length=13)
      'backgroundColor' => string '#ff6384' (length=7)
      'hoverBackgroundColor' => string '#ff6384' (length=7)
      'data' => string '{"x":"28","y":"48","r":"40"}' (length=28)

在chartJS代码中，我有以下内容：

var ctx9 = document.getElementById("volunteerInterestsBubbleChart").getContext('2d');
    //var yourImage = new Image(40,40);
    //yourImage.src ='https://www.test.be/design/img/interesses/grey/interesse-financieel-grey.svg';
    var myVolunteerInterestsBubbleChart = new Chart(ctx9, {
        type: 'bubble',
        data: {
            datasets: [
                <?=$json_interestDatasets?>
            ]
        },
        plugins: [{
            afterUpdate: function(chart, options) {
                //chart.config.data.datasets[0]._meta[8].data[0]._model.pointStyle = yourImage;
            }
        }]
    });

如何使用php动态填充chartjs气泡数据集

0 个答案: