Удалить пустое пространство в chart.js картировать

я стандартный горизонтально уложены графика, но, кажется, есть большой разрыв между графом и легендами (в лице большого красным круга сильфон)Удалить пустое пространство в chart.js картировать

Я смотрел на много вариантов конфигурации, но я не могу найти, где это взялось

$(function(){ 
myBarChart = new Chart($("#myChart"), { 
     type: 'horizontalBar', 
     data: { 
      labels: ["Actions"], 
      datasets: [{ 
       label: 'Closed : 50 (65%)', 
       data: [50], 
       backgroundColor: [ 
        'rgba(255, 0, 0, 0.5)' 
       ], 
       borderColor: [ 
        'rgba(255, 0, 0, 1)' 
       ], 
       borderWidth: 1 
      }, { 
       label: 'Delayed : 20 (12%)', 
       data: [20], 
       backgroundColor: [ 
        'rgba(0, 0, 255, 0.5)' 
       ], 
       borderColor: [ 
        'rgba(0, 0, 255, 1)' 
       ], 
       borderWidth: 1 
      }, 
      { 
       label: 'Open : 12 (5%)', 
       data: [12], 
       backgroundColor: [ 
        'rgba(0, 255, 0, 0.5)' 
       ], 
       borderColor: [ 
        'rgba(0, 255, 0, 1)' 
       ], 
       borderWidth: 1 
      } 
      ] 
     }, 
     options: { 

      //tooltips: { enabled: false }, 
      maintainAspectRatio: false, 
      responsive: true, 
      legend: { 
       position: "right" 
      }, 
      scales: { 

       xAxes: [{ 
        max: 82, 

        display: false, 
        gridLines: { 
         display: false 
        }, 
        stacked: true 
       }], 
       yAxes: [{ 
        max: 82, 
        display: false, 
        gridLines: { 
         display: false, 
        }, 
        stacked: true, 
        ticks: { 
         beginAtZero: true 
        } 
       }] 
      } 
     } 
    }); 
    });

Edit: Woopsie, я забыл добавить скрипку я сделал:

http://jsfiddle.net/uLUAT/1165/

источник

2017-02-15 Remy Grandin

Вы можете добавить свой код? Я использовал его, и я решил эту проблему. Вы должны обновить максимальное значение оси x. Если вы поделитесь своим кодом, я могу больше помочь – cbalakus

Готово, я подготовил скрипку, но полностью забыл связать ее, мой плохой! –

http://jsfiddle.net/uLUAT/1166/ Я пробовал разные вещи, но я не могу исправить это. Можете ли вы изменить свои данные? Если Вашие данные в общей сложности равен 100 нет никаких проблем, я думаю,

data: { 
    labels: ["Actions"], 
    datasets: [{ 
    label: 'Closed : 50 (65%)', 
    data: [50], 
    backgroundColor: [ 
     'rgba(255, 0, 0, 0.5)' 
    ], 
    borderColor: [ 
     'rgba(255, 0, 0, 1)' 
    ], 
    borderWidth: 1 
    }, { 
    label: 'Delayed : 20 (12%)', 
    data: [20], 
    backgroundColor: [ 
     'rgba(0, 0, 255, 0.5)' 
    ], 
    borderColor: [ 
     'rgba(0, 0, 255, 1)' 
    ], 
    borderWidth: 1 
    }, { 
    label: 'Open : 12 (5%)', 
    data: [30], 
    backgroundColor: [ 
     'rgba(0, 255, 0, 0.5)' 
    ], 
    borderColor: [ 
     'rgba(0, 255, 0, 1)' 
    ], 
    borderWidth: 1 
    }] 
},

http://jsfiddle.net/uLUAT/1167/ Я создал функцию проверить. Вам больше не нужно менять значения.

var total = 0; 
    var value = 0; 
    for (var i = 0; i < myBarChart.data.datasets.length; i++) { 
    total += myBarChart.data.datasets[i].data[0] 
    } 
    value = (100 - total)/myBarChart.data.datasets.length 
    for (var i = 0; i < myBarChart.data.datasets.length; i++) { 
    myBarChart.data.datasets[i].data[0] += value; 
    } 
    myBarChart.update();

источник

2017-02-15 13:52:08 cbalakus

Я могу попробовать это, но мне придется поиграть с функциями рендеринга и подсказки текста, чтобы захватить неаудированные значения. –

Я отредактировал свой комментарий. Вы можете проверить это? возможно, на этот раз работает лучше – cbalakus

Использование

xAxes: [{ 
    ticks: { max: 82 }, 
    ... 
}]

вместо

xAxes: [{ 
    max: 82, 
    ... 
}]

$(function(){ 
 
    myBarChart = new Chart($("#myChart"), { 
 
      type: 'horizontalBar', 
 
      data: { 
 
       labels: ["Actions"], 
 
       datasets: [{ 
 
        label: 'Closed : 50 (65%)', 
 
        data: [50], 
 
        backgroundColor: [ 
 
         'rgba(255, 0, 0, 0.5)' 
 
        ], 
 
        borderColor: [ 
 
         'rgba(255, 0, 0, 1)' 
 
        ], 
 
        borderWidth: 1 
 
       }, { 
 
        label: 'Delayed : 20 (12%)', 
 
        data: [20], 
 
        backgroundColor: [ 
 
         'rgba(0, 0, 255, 0.5)' 
 
        ], 
 
        borderColor: [ 
 
         'rgba(0, 0, 255, 1)' 
 
        ], 
 
        borderWidth: 1 
 
       }, 
 
       { 
 
        label: 'Open : 12 (5%)', 
 
        data: [12], 
 
        backgroundColor: [ 
 
         'rgba(0, 255, 0, 0.5)' 
 
        ], 
 
        borderColor: [ 
 
         'rgba(0, 255, 0, 1)' 
 
        ], 
 
        borderWidth: 1 
 
       } 
 
       ] 
 
      }, 
 
      options: { 
 

 
       //tooltips: { enabled: false }, 
 
       maintainAspectRatio: false, 
 
       responsive: true, 
 
       legend: { 
 
        position: "right" 
 
       }, 
 
       scales: { 
 

 
        xAxes: [{ 
 
         ticks: { max: 82 }, 
 

 
         display: false, 
 
         gridLines: { 
 
          display: false 
 
         }, 
 
         stacked: true 
 
        }], 
 
        yAxes: [{ 
 
         max: 82, 
 
         display: false, 
 
         gridLines: { 
 
          display: false, 
 
         }, 
 
         stacked: true, 
 
         ticks: { 
 
          beginAtZero: true 
 
         } 
 
        }] 
 
       } 
 
      } 
 
     }); 
 
     });

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
 
<div style="border:1px solid black"> 
 
<canvas id="myChart" height="100"></canvas> 
 
</div>

источник

2017-02-15 15:27:02

Удалить пустое пространство в chart.js картировать

ответ

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