2016-05-06 3 views
2

Я создал гистограмму, но я вижу только 5 значений из 6 ярлыков, которые я создал. Даже на charts.js website пример гистограммы, который они использовали, показывает только 6 значений из 7 созданных меток.Последнее значение, не отображаемое на гистограмме charts.js-library

Мой код

'use strict' 

$(function() { 
var data = { 
    labels: ["HTML", "CSS", "JavaScript", "Java", "Wordpress", "Boostrap"], 
    datasets: [ 
     { 
      label: "My Skill Set", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [100, 90, 80, 82, 85, 88], 
     } 
    ] 
}; 
var options = {}; 
var ctx = document.getElementById("myChart").getContext('2d'); 
var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
    }); 
}); 
+0

Я знаю, почему 'July' не показывает ничего в ссылке вы предоставили .. это потому, что ось у не начинается с 0 .. это начинается с 40 ... но в то же время 40 является самым низким значением в ссылке, которую вы указали .. но 88 не является наименьшим значением в вашем массиве 'data'. Можете ли вы опубликовать изображение своего графика? –

+0

Вы правы с точки зрения масштаба. Мой график начинается с 80, так как он является самым низким значением. Как именно вы меняете масштаб? – Codes316

+0

Был ли мой ответ в состоянии помочь вам? –

ответ

3

Я нашел это из ссылки вы предоставили ..

ar myChart = new Chart(ctx, { 
type: 'bar', 
data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
    datasets: [{ 
     label: '# of Votes', 
     data: [12, 19, 3, 5, 2, 3] 
    }] 
}, 
options: { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero:true 
      } 
     }] 
    } 
} 

попробовать это.

3

я на самом деле придумал это:

var options = { 
    scales: { 
     yAxes: [{ 
      display: true, 
      ticks: { 
       suggestedMin: 0, // minimum will be 0, unless there is a lower value. 
       // OR // 
       beginAtZero: true // minimum value will be 0. 
      } 
     }] 
    } 
};