Question

我试图在Chart.JS的例子之后模拟我的条形图并且没有任何运气。这就是我要重新创造的东西：

http://www.chartjs.org/docs/#bar-chart-introduction

无论出于何种原因，图表上的条形图都显示为深灰色。我一直无法解决这个问题。我的代码如下。有谁知道如何更改我的代码来解决这个问题？

谢谢！

            // bar chart data
            var barData = {
                labels : ["Counselor","Examiner","Rock","Seeker","Uniter"],

                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',

            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',

            ],
            borderWidth: 1,


                datasets : [
                    {
                        // fillColor : "#48A497",
                        // strokeColor : "#48A4D1",
                        data : [100, 200, 300, 400, 500, ]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);

Answer 1

我认为问题是颜色应该是我在官方文档链接中读到的数据集的一部分，试试这个：

<div class="container-fluid">
<div class="row  center">
<div class="col"><h1>Please Enter Your Phone Number:</h1></div>
</div>
<div class="row">
  <div class="col col-100 center" style="display:block;">
<input type="tel" ng-model="number" class="borders center" name="number">
</div>
</div>
<div class="row center">
  <div class="col">
  <select id="select" ng-model="language">
    <option value="French">FRENCH</option>
    <option value="German">GERMAN</option>
    <option value="English">ENGLISH</option>
    <option value="Mandarin">MANDARIN</option>
    <option value="Swedish">SWEDISH</option>
    <option value="Latin">LATIN</option>
    <option value="Bulgarian">BULGARIAN</option>
    <option value="Turkish">TURKISH</option>
  </select>
</div>
</div>
<div class="row center"><div class="col">
  <button class="Nextbutton" ng-click="doit(number,language)">
<h1>TRANSLATE</h1></button>
</div>

小提琴示例补充： https://jsfiddle.net/hdr4uuLy/

Answer 2

如果有人使用此信息，请添加一些信息...确保这是在您的头标记中。我只使用Charts.JS CDN，但这需要捆绑包：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>

使用ChartJS为各个条设置背景颜色？

2 个答案: