ChartJSディスプレイの凡例

Question

私はChartJSで新しく、凡例にいくつか問題があります。私が添付された画像

var mybarChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: [], 
      datasets: [{ 
       label: '# of Votes', 
       backgroundColor: "#000080", 
       data: [80] 
      }, { 
       label: '# of Votes2', 
       backgroundColor: "#d3d3d3", 
       data: [90] 
      }, 
      { 
       label: '# of Votes3', 
       backgroundColor: "#add8e6", 
       data: [45] 
      }] 
     }, 

     options: { 
      legend: { 
       display: true, 
       labels: { 
        fontColor: "#000080", 
       } 
      }, 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true 
        } 
       }] 
      } 
     } 
    }); 

のようにチャート怒鳴る凡例を表示しようとしている。しかし、私の表示チャートであるため

<div class="x_panel"> 
    <div class="x_title"> 
     <h2>Bar graph</h2> 
     <ul class="nav navbar-right panel_toolbox" style="padding-left:5%"> 
      <li> 
       <a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
      </li> 
      <li> 
       <a class="close-link"><i class="fa fa-close"></i></a> 
      </li> 
     </ul> 
     <div class="clearfix"></div> 
    </div> 
    <div class="x_content"> 
     <canvas id="mybarChart"></canvas> 
    </div> 
</div> 

：私のようなわずか3バーで、単純な棒グラフを持っています空:( 私もキャンバス怒鳴る別のdivを追加してそれを呼び出すことにより、凡例を表示しようとしました：同じ結果と

document.getElementById('barlegend').innerHTML = mybarChart.generateLegend(); 

:(

私は間違っていますか？

Answer 1

質問で指定したコードに基づいて、labelsデータをグラフデータオブジェクトに追加するのを忘れたようです。この情報がなければ、chartjsは軸を生成して各データセットのデータをその軸にマップすることができません。

また、凡例をチャートの下にしたいと述べたので、display: bottomオプションを追加しました。ここに作業コードがあります。

var ctx = document.getElementById("mybarChart").getContext("2d"); 

var mybarChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: ['Votes'], 
    datasets: [{ 
     label: '# of Votes', 
     backgroundColor: "#000080", 
     data: [80] 
    }, { 
     label: '# of Votes2', 
     backgroundColor: "#d3d3d3", 
     data: [90] 
    }, { 
     label: '# of Votes3', 
     backgroundColor: "#add8e6", 
     data: [45] 
    }] 
    }, 

    options: { 
    legend: { 
     display: true, 
     position: 'bottom', 
     labels: { 
     fontColor: "#000080", 
     } 
    }, 
    scales: { 
     yAxes: [{ 
     ticks: { 
      beginAtZero: true 
     } 
     }] 
    } 
    } 
}); 

ここには、codepen exampleもあります。