php - Chart JS 堆叠标签而不是使它们水平

问题描述

将数组对象传递给 ChartJS 的标签。我正在将一个数组从 PHP 传递给 ChartJS。这些值应该形成图表的水平标签，但它只是相互堆叠显示。我该如何解决？

var answers = <?php echo json_encode($answerArray); ?>;
    var countList = <?php echo json_encode($countList); ?>;
    console.log(answers);

    var areaChartData = {
      labels  : [answers],
      datasets: [
        {
          label               : 'Digital Goods',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius         : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [50, 60, 70, 80 , 90]
        },
        {
          label               : 'Electronics',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [50, 60, 70, 80 , 90]
        },
                {
          label               : 'Welath',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         :  false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [50, 60, 70, 80 , 90]
        }
      ]
    }

这是我在图表上得到的结果：

这就是我期望的样子：

标签： phparraysjsonchart.js

这种行为来自您的标签数组包含一个数组，该数组包含一个包含所有标签的数组，如下所示：[["label1", "label2", "label3"]]这适用于多行标签。您需要确保您的标签位于这样的单个数组中：["label1", "label2", "label3"]然后它将正确呈现。

一个简单的解决方法是替换labels: [answers],为labels: answers,

php - Chart JS 堆叠标签而不是使它们水平

问题描述

解决方案

推荐阅读