刪除空白空間在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 
        } 
       }] 
      } 
     } 
    }); 
    });

編輯：Woopsie，我已經忘了加我做了小提琴：

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

來源

2017-02-15 Remy Grandin

您可以將您的代碼？即時通訊使用它，我解決了這個問題。您應該更新x軸的最大值。如果你分享你的代碼，我可以幫助更多 – cbalakus

完成後，我準備了小提琴但完全忘了鏈接它，我的壞！ –

http://jsfiddle.net/uLUAT/1166/ 我嘗試過不同的事情，但我無法修復它。你能改變你的數據嗎？如果您DATAS總量等於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

我可以試試這個，但是我不得不用lengend和工具提示文本渲染函數來獲取非調整值。 –

我編輯了我的評論。你能檢查它嗎？也許這次更好 – 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之圖表

回答

相關問題