Chartjs v2 xAxesラベルとscaleLabelのオーバーラップ

Question

グラフjs v2がオーバーラップしているのは、scaleLabelのlabelStringをさらに下に移動してオーバーラップしないようにする方法です。黄色と赤色の部分でマークされたスクリーンショットを表示してください。これは、折れ線グラフのためですが、簡単に合わせてすることができます

1：コードの

一部は、あなたの問題には2つの可能な解決策があります

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

Answer 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); 

これらの2つのオプションのいずれかが動作します。

あなたのケースでは伝説のコードは（すでにBarChartコントロールを生成していると仮定）この

ようになります

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

あなたが好むしかし、その後の間隔の追加を含む（凡例をフォーマットするためにCSSを使用グラフ内の凡例の間）