无法使用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创建图例

回答

相关问题