Chart.js条形图不显示多个项目的条形图

pgccezyw  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(219)

我正在使用chart.js和asp.net mvc 5 c#来绘制图表。我现在面临一个问题,多个数据值不显示条形图,而只显示名称。因此,例如data:[results.AppsName]可以是“MoreTesting,Search,Test_email”,如果data:[results. AppsName]是“MoreTesting”,图表将正确显示。下面是我的部分代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
 
 success: function (results) {
                
                if (results !== null) {
                    
                    var barChartData =
                    {
                        labels: [results.Apps], 
                        datasets: [{
                                label: 'Apps Count',
                                backgroundColor: [
                                    "#f990a7",
                                    "#aad2ed",
                                    "#9966FF",
                                    "#99e5e5",
                                    "#f7bd83"
                                ],
                            borderWidth: 2,
                               
                            data: [results.AppsName] //This portion can have multiple values like "MoreTesting,Search,Test_email" or a single value like "MoreTesting"
                            }
                        ]
                    };
                   
                    var ctx1 = document.getElementById("barcanvas").getContext("2d");
                    window.myBar = new Chart(ctx1, {
                        type: 'bar',
                        data: barChartData,
                        options:
                        {
                            title:
                            {
                                display: true,
                                text: "Apps Count"
                            },
                            responsive: true,
                            maintainAspectRatio: true
                        }
                         
                     });
                }
                   
            }

        });

字符串

jmp7cifd

jmp7cifd1#

对于results.Appsresults.AppsName,不需要额外的括号([])。
与您当前的代码一样,它将所有标签分类为一个类别,而不是多个类别(bar)。

var barChartData = {
    labels: results.Apps,
    datasets: [
      {
        label: 'Apps Count',
        backgroundColor: [
          '#f990a7',
          '#aad2ed',
          '#9966FF',
          '#99e5e5',
          '#f7bd83',
        ],
        borderWidth: 2,

        data: results.AppsName,
      },
    ],
  };

字符串
Demo @ StackBlitz

相关问题