关于 javascript:chart.js 混合图表中的图表之一未绘制


chart.js one of the chart from mixed chart is not plotting

我正在尝试使用 chart.js 创建一个混合图表。出于绘图目的，我将数据分成三个不同的数组。样本数据：

1
2
3
4
5
6
labelData:
Ezion Led Light Bulb - Warm White 10.5w E27
Ezion Induction Cooker Ez822
Ezion Led Light Bulb - Daylight 10.5w E27
Ezion Led Light Bulb - Warm White 5.5w E27
Ezion Led Light Bulb - Warm White 7.5w E27

对于数量数据，我希望它是水平条格式。至于数量数据，我希望它是行格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var opt = {
                            type:"horizontalBar",
                            data: {
                                labels: labelData,
                                datasets: [{
                                    label: brand,
                                    data: amountData,
                                }, {
                                    type: 'line',
                                    label: brand,
                                    data: quantityData,
                                }]
                            },
                            options: options
                        };

折线图根本没有绘制。有什么想法吗？

提前致谢！

编辑第 2 部分

这是我尝试填充 labelData 数组的部分。我从 firebase 中提取，但出于演示目的，我将先放一些虚拟数据：

1
2
3
4
5
6
7
8
9
10
11
12
var topProductList = [{itemName: 'Ezion Led Light Bulb - Warm White 10.5w E27'},
{itemName: 'Ezion Induction Cooker Ez822'},
{itemName: 'Ezion Led Light Bulb - Daylight 10.5w E27'},
{itemName: 'Ezion Led Light Bulb - Warm White 5.5w E27'},
{itemName: 'Ezion Led Light Bulb - Warm White 7.5w E27'}];

for(var i = 0 ; i < topProductList.length; i++){
    var itemName = topProductList[i].itemName;
    itemName = itemName.replace(/\\s/g, '\
');
    labelData.push(itemName);                          
}

正如@GRUNT 所建议的，我正在尝试用 \\'\\\\ 替换空白空间
\\' 正确格式化字符串，以便图表可以执行回调。但是，上面的代码并没有将空格替换为 \\'\\\\
\\'。这是我得到的：

enter

1
2
3
4
5
6
7
8
tooltips: {
   callbacks: {
      title: function(t, d) {
         return d.labels[t[0].index].replace(/\
/, ' ');
      }
   }
}

但首先，您应该使用 x-axis\\' ticks 回调函数来破坏 x 轴标签，而不是使用二维标签数组(如您提到的线程中所建议的那样)，如下所示：

1
2
3
4
5
6
7
8
xAxes: [{
   ticks: {
      callback: function(tick) {
         return tick.split(/\
/);
      }
   }
}]

* 在标签中你想换行的地方放一个换行符，例如：Jan\
2017

á'...á'?á'?á'? a§?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan\
2017', 'Feb\
2017', 'Mar\
2017', 'Apr\
2017', 'May\
2017'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               callback: function(tick) {
                  return tick.split(/\
/);
               }
            }
         }],
         yAxes: [{
            ticks: {
               beginAtZero: true,
               stepSize: 1
            }
         }]
      },
      tooltips: {
         callbacks: {
            title: function(t, d) {
               return d.labels[t[0].index].replace(/\
/, ' ');
            }
         }
      }
   }
});
1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js">
<canvas id="ctx"></canvas>
相关讨论