Liniendiagramm-Spot in der oberen Mitte des Balkendiagramms

Question

Ich habe eine Combo Dual-Balkendiagramm mit chartjs erstellt. Mein Code ist unten angegeben. Das Balken-Kombinations-Dual-Diagramm funktioniert gut, aber ich hatte eine Anforderung, eine Linie für das grüne Farb-Balkendiagramm zu setzen, das alle seine oberen Mittelpunkte verbindet. Ich habe ein Liniendiagramm gezeichnet, das den grünen Graphen verbindet, aber das Problem, dem ich gegenüberstehe, ist, dass der Liniendiagrammpunkt nicht in der oberen Mitte des grünen Balkendiagramms liegt, wie unten gezeigt.

Kann jemand bitte sagen Sie mir, wie die Linie Fleck in der oberen Mitte des Balkendiagramms machen

Working Demo

html

<canvas id="canvas"></canvas> 

js

var barChartData = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      type: 'bar', 
       label: "Visitor", 
       data: [10, 59, 340, 521, 450, 200, 195], 
       fill: false, 
       backgroundColor: "rgba(220,220,220,0.5)", 
       borderColor: '#71B37C', 
       hoverBackgroundColor: '#71B37C', 
       hoverBorderColor: '#71B37C' 

     }, { 
      type: 'bar', 
       label: "Visitor", 
       data: [200, 185, 590, 621, 250, 400, 95], 
       fill: false, 
       backgroundColor: '#71B37C', 
       borderColor: '#71B37C', 
       hoverBackgroundColor: '#71B37C', 
       hoverBorderColor: '#71B37C' 

     }, { 

       type:'line', 
       data: [200, 185, 590, 621, 250, 400, 95], 
       fill: false, 
       borderColor: '#EC932F', 
       backgroundColor: '#EC932F', 
       pointBorderColor: '#EC932F', 
       pointBackgroundColor: '#EC932F', 
       pointHoverBackgroundColor: '#EC932F', 
       pointHoverBorderColor: '#EC932F' 

     } ] 
    }; 

    window.onload = function() { 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData, 
      options: { 
      responsive: true, 
      tooltips: { 
       mode: 'label' 
      }, 
      elements: { 
      line: { 
       fill: false 
      } 
     }, 
      scales: { 
      xAxes: [{ 
       display: true, 
       gridLines: { 
        display: false 
       }, 
       labels: { 
        show: true, 
       } 
      }], 
      yAxes: [{ 
       type: "linear", 
       display: true, 
       position: "left", 
       id: "y-axis-1", 
       gridLines:{ 
        display: false 
       }, 
       labels: { 
        show:true, 

       } 
      }, { 
       type: "linear", 
       display: true, 
       position: "right", 
       id: "y-axis-2", 
       gridLines:{ 
        display: false 
       }, 
       labels: { 
        show:true, 

       } 
      }] 
     } 
     } 
     }); 
    }; 

Answer 1

Um die Anzeige eines bestimmten Diagramm zu ändern, haben Sie die Konfiguration Ihres gesamten Graphen zu bearbeiten.

Tief im Inneren finden Sie die Attribute, die Sie für Ihr bestimmtes Diagramm ändern müssen (in Ihrem Fall das Liniendiagramm).

---

Wenn Sie versuchen, tief in ihr suchen, werden Sie schließlich x & y Attribute für Ihre Liniendiagramm finden, gespeichert in myBar.config.data.datasets[2].metaData[i]._model ( , die zu finden war schwer zu, ich gebe zu).

Dann brauchen Sie nur diese zu Ihrem Code hinzuzufügen (nach der Erzeugung Ihrer myBar):

// For each value of your line chart ... 
for (var i = 0; i < myBar.config.data.datasets[2].metaData.length; i++) { 
    // Get the bar width associated to this value 
    var barWidth = myBar.config.data.datasets[1].metaData[i]._model.width; 
    // Get the percentage that the bar is taking in the graph 
    var barPercentage = myBar.config.options.scales.xAxes[0].barPercentage; 

    // Add the width of the bar/(2*percentage) -- which is the half of the bar 
    myBar.config.data.datasets[2].metaData[i]._model.x += barWidth/(2*barPercentage); 
    // Also edit the controlPointNext and controlPointPrevious to change the bezier curve display 
    myBar.config.data.datasets[2].metaData[i]._model.controlPointNextX += barWidth/(2*barPercentage); 
    myBar.config.data.datasets[2].metaData[i]._model.controlPointPreviousX += barWidth/(2*barPercentage); 
} 

prüfen the plunker für den vollständigen Code.

---

Und hier ist das Endergebnis:

---

Update - Responsiveness hinzugefügt:

Um die Grafik ansprechbar zu machen, müssen Sie die Schleife in Chart.js plugins zu erreichen.

Mit Plugins können Sie alle Ereignisse behandeln, die beim Erstellen, Aktualisieren und Rendern Ihres Diagramms ausgelöst werden.

Wir werden vor allem das afterUpdate Ereignis bearbeiten, das jedes Mal ausgelöst wird, wenn es ein Update gibt (eine Größenänderung für Beispiel).

Chart.pluginService.register({ 
    afterUpdate: function(chart) { 
     // Loop in here 
    } 
}); 

ist hier another fiddle mit dem Endergebnis, das anspricht.

Beachten Sie, dass das Balkendiagramm nach der Linie gezogen wird, ein (Ich weiß nicht, warum), so hatte ich die alpha der Bar Hintergrundfarbe zu senken.