Chartjs v2 xAxes標籤與標尺重疊標籤

圖表js v2與重疊是否有一種方法可以將scaleLabel的labelString進一步向下移動以使其不重疊。請查看標記爲黃色和紅色部分的截圖。代碼Chartjs v2 xAxes標籤與標尺重疊標籤

部分是如下

    scales: { 
          xAxes: [{ 
           display: true, 
           ticks: { 
            autoSkip: false, 
            autoSkipPadding: 20 
           }, 
           scaleLabel: { 
            display: true, 
            labelString: "ProductName(ProductName)" 
           } 
          }],

來源

2016-01-21 Thunder

有你的問題，有兩種可能的解決方案：

1：這是一個折線圖，但可以很容易定製一張條形圖。

圖例是ChartJs庫的默認選項的一部分。所以你不需要明確地添加它作爲一個選項。

該庫生成HTML。這僅僅是將添加到您的頁面的問題。例如，將其添加到給定DIV的innerHTML中。（編輯默認選項，如果你正在編輯的顏色等）

<div> 
    <canvas id="chartDiv" height="400" width="600"></canvas> 
    <div id="legendDiv"></div> 
</div> 

<script> 
    var data = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      { 
       label: "The Flash's Speed", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: [65, 59, 80, 81, 56, 55, 40] 
      }, 
      { 
       label: "Superman's Speed", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [28, 48, 40, 19, 86, 27, 90] 
      } 
     ] 
    }; 

    var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data); 
    document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend(); 
</script>

2：將在圖表選項傳奇模板

你還需要一些基本的CSS添加到讓它看起來不錯。

//legendTemplate takes a template as a string, you can populate the template with values from your dataset 
var options = { 
    legendTemplate : '<ul>' 
        +'<% for (var i=0; i<datasets.length; i++) { %>' 
        +'<li>' 
        +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>' 
        +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>' 
        +'</li>' 
       +'<% } %>' 
       +'</ul>' 
    } 

    //don't forget to pass options in when creating new Chart 
    var lineChart = new Chart(element).Line(data, options); 

    //then you just need to generate the legend 
    var legend = lineChart.generateLegend(); 

    //and append it to your page somewhere 
    $('#chart').append(legend);

這兩個選項要麼將工作。

在你的情況傳說代碼會是這個樣子

（假設你已經有一個BARCHART生成）

<div id="legendDiv"></div> 
document.getElementById("legendDiv").innerHTML = BarChart.generateLegend();

然後使用CSS來格式化的傳說，但是你會喜歡（包括添加間距在圖表中的圖例之間）

來源

2016-04-01 02:43:38 user2263572

在圖表下添加legend-div是一個合理的解決方法。 – markE

問題是關於labelString：「ProductName（ProductName）」不是關於圖例，圖例全是關於y軸的，這裏的問題是關於x軸的。 – Thunder

Chartjs v2 xAxes標籤與標尺重疊標籤

回答

相關問題