如何縮短chart.js之標籤

我現在面臨的問題是我有兩個圖表，用Chart.js製成，其中包含動態標籤說明，如果某個標籤的描述太長，圖表轉小，但我需要兩個圖表包含相同的高度。如何縮短chart.js之標籤

如何配置Chart.js縮短標籤，並顯示完整的標籤就像HTML冠軍時，鼠標懸停時，保持標籤區域的高度？

我需要的是保持圖表區域的高度，無論標籤有多長。

var options = { 
 
     //maintainAspectRatio: false, 
 
     responsive:true, 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero:true 
 
       } 
 
      }] 
 
     } 
 
    }; 
 

 
var ctx = document.getElementById("myCanvas1"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: ["Red", "Blue yjfid ", "Yellow", "Green", "Purple", "Orange"], 
 
     datasets: [{ 
 
      label: '# of Votes', 
 
      data: [12, 19, 3, 5, 2, 3], 
 
      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 
 
     }] 
 
    }, 
 
    options: options 
 
}); 
 

 

 
var ctx = document.getElementById("myCanvas2"); 
 
var 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], 
 
      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 
 
     }] 
 
    }, 
 
    options: options 
 
});

div{ 
 
    display: inline-block; 
 
    width: 49%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 
 
    <div> 
 
    <canvas id="myCanvas1" ></canvas> 
 
    </div> 
 
    <div> 
 
    <canvas id="myCanvas2"></canvas> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-06-06 Lai32290

在[截斷帆布標籤可能重複這個答案參考ChartJS，同時保留工具提示中的完整標籤值]（h載荷大小：//stackoverflow.com/questions/28296994/truncating-canvas-labels-in-chartjs-while-keeping-the-full-label-value-in-the-to） –

，我認爲這個問題是有一點不同，也許我可以截斷標籤字符串，但我需要在鼠標懸停時完全顯示它們 – Lai32290

添加您正在面臨問題的示例代碼 –

從post。對鼠標懸停可以看到提示顯示完整的標籤名

var options = { 
 
    scales: { 
 
    xAxes: [{ 
 
     ticks: { 
 
     callback: function(value) { 
 
      if (value.length > 4) { 
 
      return value.substr(0, 4) + '...'; //truncate 
 
      } else { 
 
      return value 
 
      } 
 

 
     }, 
 
     } 
 
    }], 
 
    yAxes: [{}] 
 
    }, 
 
    tooltips: { 
 
    enabled: true, 
 
    mode: 'label', 
 
    callbacks: { 
 
     title: function(tooltipItems, data) { 
 
     var idx = tooltipItems[0].index; 
 
     return 'Title:' + data.labels[idx]; //do something with title 
 
     }, 
 
     label: function(tooltipItems, data) { 
 
     //var idx = tooltipItems.index; 
 
     //return data.labels[idx] + ' €'; 
 
     return tooltipItems.xLabel + ' €'; 
 
     } 
 
    } 
 
    }, 
 
}; 
 

 

 
var ctx = document.getElementById("myCanvas1"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["Red", "Blue mbkjbjkbjlkbk", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
 
     label: '# of Votes', 
 
     data: [12, 19, 3, 5, 2, 3], 
 
     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 
 
    }] 
 
    }, 
 
    options: options 
 
}); 
 

 

 
var ctx = document.getElementById("myCanvas2"); 
 
var 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], 
 
     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 
 
    }] 
 
    }, 
 
    options: options 
 
});

div { 
 
    display: inline-block; 
 
    width: 49%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 
 
    <div> 
 
    <canvas id="myCanvas1"></canvas> 
 
    </div> 
 
    <div> 
 
    <canvas id="myCanvas2"></canvas> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-06-07 16:42:06

如何縮短chart.js之標籤

回答

相關問題