Невозможно создать легенду с ChartJs

Я использую ChartJs, и все работает нормально.Невозможно создать легенду с ChartJs

Теперь мне нужно добавить легенду и столкнуться с проблемой! Легенда никогда не появляется.

Я видел How can labels/legends be added for all chart types in chart.js (chartjs.org)? и могу подтвердить, что у меня есть текущая последняя версия (версия 1.0.2)

Я побежал Chrome Dev инструменты и понял, что причина, по которой легенда не показывает, потому что исключение составляет быть (круговая диаграмма все еще показывает). Сообщение об ошибке

Uncaught ReferenceError: datasets is not defined

Это код, я использую для моего PieChart

//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, действительно ??? Вы проголосовали, чтобы закрыть этот вопрос как дубликат ... Я процитировал ссылку, которую вы считаете дубликат в ** моем ** вопросе? Вы действительно думаете, что после того, как я прочитал этот вопрос, а затем добавил ссылку на него сам, что я все равно опубликую его, зная, что это дубликат? – 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, он не может быть ответом (что означает единственную причину) просто потому, что Seth T также исправил его, не требуя этого ... +1 ... – MyDaftQuestions

Ну, @Seth T использует 'сегменты' ... но в конце мы все немного сколыли – ThePavolC

Это может быть чрезмерно упрощенным, поскольку он не касается настройки легенды вообще, но если вы просто удалите шаблон из своих пользовательских параметров, вы получите глобальный шаблон.

Теперь я пойду, как настроить его, но это то, что его показало для меня.

источник

2015-08-16 00:53:48

Невозможно создать легенду с ChartJs

ответ

Смежные вопросы