Question

我已经添加了chartJS，并且效果很好，当我试图将我的json_encoded php数组添加到chartJS的数据字段中时，我遇到了这个问题。我的问题是图表不会将我的数据添加到条形图中。看到图片enter image description here

这是当我使用print_r输出数据时我的json_encoded数组的样子

[{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"6"},{"todoCoin":"5"},{"todoCoin":"3"},{"todoCoin":"1"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"4"},{"todoCoin":"5"},{"todoCoin":"9"},{"todoCoin":"10"},{"todoCoin":"11"},{"todoCoin":"6"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"2"},{"todoCoin":"6"},{"todoCoin":"8"},{"todoCoin":"10"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"8"},{"todoCoin":"1"},{"todoCoin":"1"}]

如果我删除json_encode，我的数组将如下所示

Array ( [0] => Array ( [todoCoin] => 1 ) [1] => Array ( [todoCoin] => 1 ) [2] => Array ( [todoCoin] => 1 ) [3] => Array ( [todoCoin] => 1 ) [4] => Array ( [todoCoin] => 1 ) [5] => Array ( [todoCoin] => 6 ) [6] => Array ( [todoCoin] => 5 ) [7] => Array ( [todoCoin] => 3 ) [8] => Array ( [todoCoin] => 1 ) [9] => Array ( [todoCoin] => 2 ) [10] => Array ( [todoCoin] => 4 ) [11] => Array ( [todoCoin] => 4 ) [12] => Array ( [todoCoin] => 5 ) [13] => Array ( [todoCoin] => 9 ) [14] => Array ( [todoCoin] => 10 ) [15] => Array ( [todoCoin] => 11 ) [16] => Array ( [todoCoin] => 6 ) [17] => Array ( [todoCoin] => 4 ) [18] => Array ( [todoCoin] => 3 ) [19] => Array ( [todoCoin] => 2 ) [20] => Array ( [todoCoin] => 6 ) [21] => Array ( [todoCoin] => 8 ) [22] => Array ( [todoCoin] => 10 ) [23] => Array ( [todoCoin] => 2 ) [24] => Array ( [todoCoin] => 4 ) [25] => Array ( [todoCoin] => 3 ) [26] => Array ( [todoCoin] => 8 ) [27] => Array ( [todoCoin] => 1 ) [28] => Array ( [todoCoin] => 1 ) ) 1

这是我仅有的html

<div class="container">
    <canvas id="myChart"></canvas>
</div>

然后是javascript

<script>
    var myChart = document.getElementById('myChart').getContext('2d');

    // Global Options
    Chart.defaults.global.defaultFontFamily = "Lato";
    Chart.defaults.global.defaultFontsize = 18;
    Chart.defaults.global.defaultFontColor = "#777";
    var test = 80;
    var massPopChart = new Chart(myChart, {
        type:'bar', // bar, horizontalBar, pie, doughnut, radar, polarArea
        data: {
            labels:['Färdiga todo', 'Tid nedlagt', 'Användare'],
            datasets: [{
                label:'Todo Score', 
                data:[
                    <?php echo json_encode($data);?>,
                    <?php echo json_encode($data);?>,
                    <?php echo json_encode($data);?>
                ], 
                backgroundColor:[
                    'rgba(128,128,0)',
                    'rgba(255,0,0)',
                    'rgba(0,0,255)'
                ],
                borderWidth: 1,
                borderColor: '#777',
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Överblick på din todoScore',
                fontSize: 25,

            },
            legend:{
                position: "right"
            }
        }   
    });
</script>

没有php的示例片段

var myChart = document.getElementById('myChart').getContext('2d');

// Global Options
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontsize = 18;
Chart.defaults.global.defaultFontColor = "#777";
var test = 80;
var massPopChart = new Chart(myChart, {
  type: 'bar', // bar, horizontalBar, pie, doughnut, radar, polarArea
  data: {
    labels: ['Färdiga todo', 'Tid nedlagt', 'Användare'],
    datasets: [{
      label: 'Todo Score',
      data: [
      [{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"6"},{"todoCoin":"5"},{"todoCoin":"3"},{"todoCoin":"1"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"4"},{"todoCoin":"5"},{"todoCoin":"9"},{"todoCoin":"10"},{"todoCoin":"11"},{"todoCoin":"6"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"2"},{"todoCoin":"6"},{"todoCoin":"8"},{"todoCoin":"10"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"8"},{"todoCoin":"1"},{"todoCoin":"1"}],
      [{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"6"},{"todoCoin":"5"},{"todoCoin":"3"},{"todoCoin":"1"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"4"},{"todoCoin":"5"},{"todoCoin":"9"},{"todoCoin":"10"},{"todoCoin":"11"},{"todoCoin":"6"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"2"},{"todoCoin":"6"},{"todoCoin":"8"},{"todoCoin":"10"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"8"},{"todoCoin":"1"},{"todoCoin":"1"}],
      [{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"1"},{"todoCoin":"6"},{"todoCoin":"5"},{"todoCoin":"3"},{"todoCoin":"1"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"4"},{"todoCoin":"5"},{"todoCoin":"9"},{"todoCoin":"10"},{"todoCoin":"11"},{"todoCoin":"6"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"2"},{"todoCoin":"6"},{"todoCoin":"8"},{"todoCoin":"10"},{"todoCoin":"2"},{"todoCoin":"4"},{"todoCoin":"3"},{"todoCoin":"8"},{"todoCoin":"1"},{"todoCoin":"1"}]
      ],
      backgroundColor: [
        'rgba(128,128,0)',
        'rgba(255,0,0)',
        'rgba(0,0,255)'
      ],
      borderWidth: 1,
      borderColor: '#777',
      hoverBorderWidth: 3,
      hoverBorderColor: '#000'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Överblick på din todoScore',
      fontSize: 25,

    },
    legend: {
      position: "right"
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

<div class="container">
  <canvas id="myChart"></canvas>
</div>

Answer 1

要从json数组输出数据，应使用json_decode。假设$data是使用以下命令声明json数组的内容：

<?php 
  $decoded_data = json_decode($data);
  foreach ($decoded_data->{'todoCoin'} as $todoCoin) {
    echo $todoCoin;
  }
?>

在您的data:[]

中尝试一下

修改

我看到我误解了它是您编码的多维数组。这也是为什么在尝试使用echo时看到数组到字符串转换错误的原因-数组本身中有多个数组。在您的data:[]属性中尝试一下：

<?php 
  $decoded = json_decode($data); // decode your json 2d array
  $decoded_array = array(); // create new 1D array
  # break down the first array
  foreach ($decoded as $todoCoins) {
    # break down the second array
    foreach ($todoCoins as $todoCoin) {
      # append each value, ignoring the 'todoCoin' key, to the new 1d array
      array_push($decoded_array, $todoCoin);
    }
  }
  echo implode(", ", $decoded_array); // outputs 1,1,1,1,1,6,5,3,1, etc...
?>

为什么不显示json_encoded数据

1 个答案: