Chart.js - Несколько графиков линий - [2]

Этот вопрос был задан и, казалось бы, ответил HERE. Хотя это не помогло мне или, похоже, даже немного работало.Chart.js - Несколько графиков линий - [2]

(Использование Chart.js)

Я использую точно тот же код, что и связанный пост, глядя, как это;

<script src="includes/Chart.js"></script> 



<div class="labeled-chart-container"> 
    <div class="canvas-holder"> 
     <canvas id="canvas1" width="250" height="250"> 
     </canvas> 
    </div> 
    <div class="canvas-holder"> 
     <canvas id="canvas2" width="250" height="250"> 
     </canvas> 
    </div> 
</div> 





<script type="text/javascript"> 

    var lineChartData = { 
     labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], 
     datasets : [ 
      { 
       label: "Target", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : [160000,175000,185000,180000,185000,185000,185000,195000,200000,0,0] 
      }, 
      { 
       label: "Sales", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : [<?php echo $stockJanuary ?>,<?php echo $stockFebruary ?>,<?php echo $stockMarch ?>,<?php echo $stockApril ?>,<?php echo $stockMay ?>,<?php echo $stockJune ?>,<?php echo $stockJuly ?>,<?php echo $stockAugust ?>,<?php echo $stockSeptember ?>,<?php echo $stockOctober ?>,<?php echo $stockNovember ?>,<?php echo $stockDecember ?>] 
      } 
     ] 

    } 
      window.onload = function(){ 
</script> 


<script type="text/javascript"> 

    var lineChartData = { 
     labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], 
     datasets : [ 
      { 
       label: "Target", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : [19000,21000,23000,25000,27000,29000,31000,32000,33000,0,0] 
      }, 
      { 
       label: "Sales", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : [<?php echo $northJanuary ?>,<?php echo $northFebruary ?>,<?php echo $northMarch ?>,<?php echo $northApril ?>,<?php echo $northMay ?>,<?php echo $northJune ?>,<?php echo $northJuly ?>,<?php echo $northAugust ?>,<?php echo $northSeptember ?>,<?php echo $northOctober ?>,<?php echo $northNovember ?>,<?php echo $northDecember ?>] 
      } 
     ] 

    } 
</script> 

<script> 
window.onload = function(){ 
    var ctx = document.getElementById("canvas2").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
    responsive: true 
    }); 


    var ctx2 = document.getElementById("canvas1").getContext("2d"); 
    window.myLine = new Chart(ctx2).Line(lineChartData2, { 
     responsive: true 
    }); 

} 
</script>

Я не знаю, является ли ответ/вопрос устаревшим или если я просто делаю что-то неправильно здесь?

источник

2016-01-12 Albert MN.

LineChartData var дублируется – cesarluis

@cesarluis У меня есть строкаChartData2 и lineChartData, как это дублировать? –

lineChartData переменная кажется дублированной. Мне кажется, вам нужно называть строку LineChartData2 второй или любой другой, что вы хотите.

Проверить это заявление:

window.myLine = new Chart(ctx).Line(lineChartData ... 
window.myLine = new Chart(ctx2).Line(lineChartData2 ...

Ваших вары декларация в каждом сценарии есть:

var lineChartData = {...} 
var lineChartData = {...}

Два раза! Таким образом, вторая декларация отменяет самую старую. Вам нужны два набора данных, и они должны соответствовать именам кода init.js init.

источник

2016-01-12 08:51:21 cesarluis

Я не вижу, что должно быть неправильно, один называется lineChartData, другой lineChartData2. Не должно быть проблем ...? –

@iversen В вашем опубликованном коде два vars называются равными, а один набор данных переопределяет самый старый набор. Поэтому я думаю, что это был провал. – cesarluis

Что было бы тогда исправить? –

Chart.js - Несколько графиков линий - [2]

ответ

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