ChartJS 디스플레이 범례

Question

저는 ChartJS에서 새로 왔으며 범례에 몇 가지 문제가 있습니다.

이

<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> 

하는 나는 전설 첨부 된 이미지

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 
        } 
       }] 
      } 
     } 
    }); 

에서 같은 차트 노호하지만 내 표시 차트가 표시하기 위해 노력하고있어 : 내가 좋아하는 단지 3 바 간단한 막대 그래프가 빈 :( 나는 또한 캔버스 노호 다른 사업부를 추가하고하여 호출하여 범례를 표시 시도했다 : 같은 결과

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도 있습니다.