Question

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

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

对于amountData，我希望它是horizontalBar格式。至于quantityData，我希望它是行格式。

var opt = {
                            type: "horizontalBar",
                            data: { 
                                labels: labelData, 
                                datasets: [{ 
                                    label: brand,
                                    data: amountData, 
                                }, {
                                    type: 'line',
                                    label: brand,
                                    data: quantityData, 
                                }] 
                            }, 
                            options: options
                        };

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

提前致谢！

编辑第2部分

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

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, '\n');
    labelData.push(itemName);                           
}

正如@GRUNT所建议的那样，我试图用'\ n'替换空格以正确格式化字符串，以便图表可以执行回调。但是，上面的代码不会用'\ n'替换空格。这是我获得的：

Answer 1

最简单的解决方法是使用回调函数（将标签合并回来）以获取工具提示标题，如下所示：

<h2>Zoek een cadeau</h2><br>
<form class="navbar-form" role="search" action="<?= base_url('SearchController/search_keyword')?>" method = "post">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name = "keyword" size="30px; ">
        <div class="input-group-btn">
            <button class="btn btn-default " type="submit" value = "Search"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
</form>
</center>
<div class="clearfix"></div>

但首先，您应该使用x轴'ticks回调函数来破坏x轴标签，而不是使用二维标签数组（如您提到的线程所示），就像这样：

<types>
   ...
   <fieldType name="random" class="solr.RandomSortField" />
  ... 
</types>
<fields>
    ...
   <dynamicField name="random*" type="random" indexed="true" stored="false"/>
    ...
</fields>

^{*在您的标签中放置一个新行字符，例如：tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index].replace(/\n/, ' ');
}
}
}}

ᴅᴇᴍᴏ⧩

xAxes: [{
   ticks: {
      callback: function(tick) {
         return tick.split(/\n/);
      }
   }
}]

Jan\n2017

chart.js混合图表中的一个图表没有绘制

1 个答案: