2016-04-19 3 views
0

Я очень новичок в Chart.js, и я работаю над образцом бара, включенным при загрузке Chart.js. Я прочитал документацию, и образцы страниц, похоже, делают что-то по-другому. Я пробовал следить за документацией и онлайн-учебными пособиями без успеха, но работа над образцовой страницей дает лучшие результаты.Невозможно настроить Chart.js

Однако я не могу настроить что-либо. Я пытаюсь запустить значение шкалы в 0, но оно не будет применяться. Это происходит со всеми вещами, которые я пытаюсь сделать (цвет шрифта и т. Д. И т. Д. И т. Д.). Остальные опции здесь были включены в файл и работают. Я не уверен, что я делаю неправильно.

<head> 
<title>Bar Chart</title> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="../dist/Chart.bundle.js"></script> 
<style> 
canvas { 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
} 
</style> 
</head> 

<body> 
<div id="container" style="width: 75%;"> 
    <canvas id="canvas"></canvas> 
</div> 

<script> 
    var barChartData = { 
     labels: ["Week 1", "Week 2"], 
     datasets: [{ 
      label: 'Round 1', 
      backgroundColor: "rgba(220,220,220,0.5)", 
      data: [12,15] 
     }, { 
      label: 'Round 2', 
      backgroundColor: "rgba(151,187,205,0.5)", 
      data: [20,17] 
     }] 

    }; 

    window.onload = function() { 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData, 
      scaleOverride:true, 
      scaleStartValue: 0, 

      options: { 
       elements: { 
        rectangle: { 
         borderWidth: 2, 
         borderColor: 'rgb(0, 255, 0)', 
         borderSkipped: 'bottom' 
        } 
       }, 
       responsive: true, 
       legend: { 
        position: 'top', 
       }, 
       title: { 
        display: true, 
        text: 'Chart.js Bar Chart' 
       } 
      } 
     }); 

    }; 
</script> 
</body> 

ответ

Смежные вопросы