2017-12-29 13 views
1

Ich habe Balken/Liniendiagramm auf meiner Seite und es gibt zwei Zeilen und vier Balkenwerte. Die erste Zeile ist ein Durchschnittswert, das ist eine gerade Linie, also ist es ein Array, das mit der gleichen Nummer gefüllt ist. Die zweite Zeile hat andere Werte als die erste Zeilennummer. Der Gedanke ist, dass die erste Linie die zweite Linie anhebt ?? Wenn ich auf die Durchschnittslinie klicke, wird die zweite Linie an die richtige Stelle gesetzt. Ist das ein Fehler oder habe ich etwas falsch gemacht? Hier ist der Code:Chart.js fügt zweite Zeilenwerte zu ersten

var ctx_bar = document.getElementById("points").getContext('2d'); 
var average = Array.apply(null, Array(points_order[0].length)).map(Number.prototype.valueOf,glob_pisteet[4][3]); 
trows_chart = new Chart(ctx_bar, { 
    type: 'bar', 
    data: { 
     labels: points_order[4], 
     datasets: [{ 
      type: 'line', 
      label: 'average', 
      borderColor: 'rgb(50, 50, 0)', 
      borderWidth: 1, 
      fill: false, 
      radius: 0, 
      data: average 
     },{ 
      type: 'line', 
      label: 'points/trow', 
      borderColor: 'rgb(255, 51, 51)', 
      borderWidth: 4, 
      fill: false, 
      data: points_order[5] 
     },{ 
      type: 'bar', 
      label: 'first', 
      backgroundColor: 'rgb(0, 92, 230)', 
      stack: 'round 1', 
      data: points_order[0] 
     }, { 
      type: 'bar', 
      label: 'second', 
      backgroundColor: 'rgb(102, 163, 255)', 
      stack: 'round 1', 
      data: points_order[1] 
     }, { 
      type: 'bar', 
      label: 'third', 
      backgroundColor: 'rgb(230, 138, 0)', 
      stack: 'round 2', 
      data: points_order[2] 
     }, { 
      type: 'bar', 
      label: 'fourth', 
      backgroundColor: 'rgb(255, 194, 102)', 
      stack: 'round 2', 
      data: points_order[3] 
     }] 

    }, 
    options: { 
       title:{ 
        display:true, 
        text:"Drows" 
       }, 
       tooltips: { 
        mode: 'index', 
        intersect: false 
       }, 
       responsive: true, 
       scales: { 
        xAxes: [{ 
         stacked: true, 
        }], 
        yAxes: [{ 
         stacked: true 
        }] 
       } 
    } 
}); 

Antwort

0

Nun fand ich den Grund:

Wenn Sie Ihre Möglichkeiten haben wie diese Einstellung:

  title:{ 
       display:true, 
       text:"Heitot" 
      }, 
      tooltips: { 
       mode: 'index', 
       intersect: false 
      }, 
      responsive: true, 
      scales: { 
       xAxes: [{ 
        stacked: true, 
       }], 
       yAxes: [{ 
        stacked: true 
       }] 
      } 

Dann wird es das tun. Sobald Sie diesen Teil nehmen:

  yAxes: [{ 
       stacked: true 
      }] 

weg oder ändern Sie stacked: true zu false, dann verhält es sich wie normal.

Verwandte Themen