2016-07-07 26 views
0

Iはchartjs V2によって生成されるバーと線グラフで複数のセットを持っている - https://jsfiddle.net/17mw40rx/Chartjs - 2つのY軸スケール問題

明らかに右側のy軸は適切にスケーリングまたは正しいラベルを示していません。

理想的には、左軸の最大値が最高バーの最大値になるようにグラフを表示しようとしています。右側のy軸が線グラフの値に拡大されるようにしたいと思います。私はこのような何かの後だ

http://plnkr.co/edit/TvY5tz?p=info

は、誰かが助けることができます。


コード:それは大丈夫です

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' 
         } 
       }] 
      }, 

     } 
    }); 

答えて

0

はGithubの上の答えを見つけました。それはデータセットオブジェクトプロパティのタイプミスであり、yAxisIDであったはずです。

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

関連する問題