無法使用ChartJs創建圖例

我正在使用ChartJs並且所有工作正常。無法使用ChartJs創建圖例

我現在需要添加圖例並遇到問題！傳說永遠不會顯示。

我見過How can labels/legends be added for all chart types in chart.js (chartjs.org)?，並可以確認我目前的最新版本（1.0.2版本）

我跑了Chrome瀏覽器開發工具，實現了傳說不顯示的原因是因爲一個例外是被拋出（餅圖仍然顯示）。該錯誤消息是

Uncaught ReferenceError: datasets is not defined

這是我用我的餅圖

//data copied direct from the ChartJs docs 
data = [ 
     { 
      value: 300, 
      color:"#F7464A", 
      highlight: "#FF5A5E", 
      label: "Red" 
     }, 
{ 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green" 
} 
    ]; 


    ctx = $("#adwordsPieChart").get(0).getContext("2d"); 
    var myPieChart = new Chart(ctx).Pie(data, chartOptions); 
    var legendAdwordsVsOrganic = myPieChart.generateLegend(); 

    document.getElementById("adwordVsOrganicLegend").innerHTML = legendAdwordsVsOrganic;

我檢查了IE和Chrome出現同樣問題的代碼，它的作用。

我不知道如何解決這個問題。我遵循了指示（我認爲）。有任何想法嗎？

JSFiddle

來源

2015-05-06 MyDaftQuestions

@MaxZoom，真的嗎？你已經投票將這個問題作爲重複來解決......我引用了你覺得在** my **問題中重複的鏈接？你真的認爲，在我讀完這個問題後，然後自己添加了一個鏈接，我仍然會發布它，知道它是重複的嗎？ – MyDaftQuestions

你可以添加一個jsfiddle嗎？ –

嘗試清空緩存並在您的頁面上重新加載。我試過你的代碼，它工作正常。唯一改變的是我刪除了'chartOptions' – ThePavolC

答案是SethT的組合和ThePavolC回覆

查詢必須在onload事件（$(function(){javascript code});），我需要更新從變量dataset與segments。

來源

2015-05-06 15:33:03 MyDaftQuestions

您能否詳細說明如何正確放置代碼？ – alamaby

也許你可以用這方面的工作。我還分叉您的jsfiddle這裏： http://jsfiddle.net/3o2okssv/

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type='text/javascript' src="jquery-1.11.3.min.js"></script> 
    <script type='text/javascript' src="Chart.min.js"></script> 
    <script> 
     $(function() { 
      data = [ 
      { 
       value: 300, 
       color:"#F7464A", 
       highlight: "#FF5A5E", 
       label: "Red" 
      }, 
      { 
       value: 50, 
       color: "#46BFBD", 
       highlight: "#5AD3D1", 
       label: "Green" 
      } 
      ]; 

      chartOptions = [{ 
       //Boolean - Whether we should show a stroke on each segment 
       segmentShowStroke : true, 

       //String - The colour of each segment stroke 
       segmentStrokeColor : "#fff", 

       //Number - The width of each segment stroke 
       segmentStrokeWidth : 2, 

       //Number - The percentage of the chart that we cut out of the middle 
       percentageInnerCutout : 50, // This is 0 for Pie charts 

       //Number - Amount of animation steps 
       animationSteps : 100, 

       //String - Animation easing effect 
       animationEasing : "easeOutBounce", 

       //Boolean - Whether we animate the rotation of the Doughnut 
       animateRotate : true, 

       //Boolean - Whether we animate scaling the Doughnut from the centre 
       animateScale : false, 

       //String - A legend template 
       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 

      }]; 

      ctx = $("#adwordsPieChart").get(0).getContext("2d"); 
      var myPieChart = new Chart(ctx).Pie(data, chartOptions); 
      var legend = myPieChart.generateLegend(); 
      $('#legend').append(legend); 
     });  
    </script> 
    </head> 

    <body> 
     <canvas id="adwordsPieChart" width="640" height="480"></canvas> 
     <br /> 
     <div id="legend"></canvas> 
    </body> 
    </html>

來源

2015-05-06 14:13:08

啊....是的，終於，傳說了。給我一分鐘檢查一下，謝謝。你有什麼機會可以說出你改變了什麼？只是'append（）'？ – MyDaftQuestions

說實話，我不確定。它沒有工作，我改變了它，它工作，恢復，並仍然工作。 –

問題是legendTemplate。將所有datasets替換爲segments。

像這樣：

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].lineColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

Jsfiddle

來源

2015-05-06 15:09:20 ThePavolC

雖然jsfiddle的作品，它*不能*是答案（意思是唯一的原因），只是因爲塞思T也修復了它，而不需要做這個... +1 ... – MyDaftQuestions

那麼，@Seth T正在使用'segments' ...但最後，我們都湊成了一點點 – ThePavolC

這可能過於簡單化，因爲它根本不處理自定義圖例，但如果您只是從自定義選項中刪除模板，您將獲得全局模板。

現在我要弄清楚如何定製它，但是這正是它爲我呈現的。

來源

2015-08-16 00:53:48

無法使用ChartJs創建圖例

回答

相關問題