Chartjs - Zwei Y-Achsen-Skala Probleme

Question

I mehrere Sätze in einer Bar und Liniendiagramm von chartjs V2 hergestellt werden, haben - https://jsfiddle.net/17mw40rx/

eindeutig die rechte Y-Achse nicht ordnungsgemäß ist, Skalierung oder korrekte Etiketten zeigt.

Idealerweise versuche ich den Graphen so darzustellen, dass der maximale Wert für die linke Achse auf den Höchstwert des höchsten Balkens skaliert. Ich möchte, dass die rechte y-Achse dann auf die Liniendiagrammwerte skaliert.

Ich bin nach so etwas wie dieses: http://plnkr.co/edit/TvY5tz?p=info

kann jemand helfen.

---

Code:

var entranceDataset = { 
      label: 'IN', 
      type: 'bar', 
      yAxesID : "y-axis-1", 
      data: [3, 11, 10, 6, 9, 28, 45, 40, 26, 3], 
      backgroundColor: 'rgba(0, 204, 0, 0.2)', 
      borderColor: 'rgba(0, 204, 0,1)', 
      borderWidth: 1 
     }; 

    var dataset = []; 
    dataset.push(entranceDataset); 

     var exitDataset = { 
       label: 'OUT', 
       type: 'bar', 
       yAxesID : "y-axis-1", 
       data: [2, 0, 3, 7, 11, 13, 8, 44, 35, 3, 46, 1], 
       backgroundColor: 'rgba(54, 162, 235, 0.2)', 
       borderColor: 'rgba(54, 162, 235, 1)', 
       borderWidth: 1 
      }; 

     dataset.push(exitDataset); 



    var lineDataset = { 
     type: 'line', 
     label: 'Total', 
     yAxesID : "y-axis-2", 
     backgroundColor: "rgba(255,255,255,0.5)", 
     data: [0, 30, 62, 100, 100, 100, 114, 77, 57, 54, 10, 10], 
     borderColor: 'rgba(255, 93, 0, 0.6)', 
     borderWidth: 2 
    } 

    dataset.push(lineDataset); 


    var ctx = $('#throughput-canvas'); 

    mainThroughputChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["13:30", "13:40", "13:50", "14:00", "14:10", "14:20", "14:30", "14:40", "14:50", "15:00", "15:10", "15:20"], 
      datasets: dataset 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        id:"y-axis-1", 
        position:'left', 
        type: 'linear', 
        ticks: { 
         beginAtZero:true 
        }, 
        scaleLabel: { 
         display: true, 
         labelString: 'Throughput' 
         } 
        }, 
         { 
        id:"y-axis-2", 
        position:'right', 
        type: 'linear', 
        /*ticks: { 
         beginAtZero:true 
        },*/ 
        scaleLabel: { 
         display: true, 
         labelString: 'Attendance' 
         } 
       }], 
       xAxes : [{ 
        gridLines : { 
         display : false 
        }, 
        scaleLabel: { 
         display: true, 
         labelString: 'Time' 
         } 
       }] 
      }, 

     } 
    }); 

Answer 1

Es ist okay, fand die Antwort auf Github. Es stellte sich heraus, dass es sich um einen Tippfehler in der Dataset-Objekteigenschaft handelte und yAxisID sein sollte.

https://jsfiddle.net/17mw40rx/1/