Chart.js, как установить начальное и конечное значения для построения графика

Я пытаюсь реализовать chart.js в своем угловом приложении (горизонтальная гистограмма).

Я хотел бы добавить начальную и конечную точки для отображения данных.

В моем dataset всякий раз, когда я передаю значение, график строится от 0 до заданного значения.

data: [2,6,5,8,7,3,2]

когда эти данные отображаются на графике, график показывает от 0 до 2.

Но я хочу показать это от 1 до 2.

Есть ли способ передать начальное значение и конечное значение, которые будут отображаться на графике (не метка данных внутри набора данных).

мои данные:

var data = {
labels: [10,9,8,7,6,5,4,3,2,1,0],
datasets: [
    {
        label: "My First dataset",
        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)',
            'rgba(255, 159, 64, 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)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [2,6,5,8,7,3,2],
    }
]
};

var options ={
barShowStroke: false,
  scaleShowGridLines: true,
  scaleOverride: true,
  scaleStartValue: 1,
  scaleStepWidth: 1,      
  responsive: true,
  barBeginAtOrigin: true,
   scales: {
                   xAxes: [{
                           time: {
                unit: 'month'
            },
                           ticks:{
                                   min: 0,
                                   max: 20,
                                   stepSize: 1
                           }
                   }],
                   yAxes: [{
                           display:true}]
    }
};

EDIT: Это мой график

Здесь я хочу, чтобы ось y 4 начиналась с 1 по оси x до 2 по оси x. Ось Y 6, чтобы начать с 3 по оси X до 7 по оси X.


person Tony Roczz    schedule 17.03.2017    source источник


Ответы (1)


Да, возможно, проверьте параметры, предусмотренные для (масштаб) диаграммы ниже:

var ctx = $("#graphTest").get(0).getContext("2d");


var options = {
      barShowStroke: false,
      scaleShowGridLines: true,
      scaleOverride: true,
      scaleStartValue: 1,
      caleStepWidth: 1,      
      responsive: true,
      barBeginAtOrigin: true
    };
    
var data = {
labels: [10,9,8,7,6,5,4,3,2,1],
datasets: [
    {
        label: "My First dataset",
        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)',
            'rgba(255, 159, 64, 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)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [2,6,5,8,7,3,2],
    }
]
};


var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

      
        
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>

person Kuldeep Singh    schedule 17.03.2017
comment
Я пытался, но это не работает. Я отредактировал свой вопрос, пожалуйста, проверьте, поможет ли это - person Tony Roczz; 17.03.2017