Wie erstellt man ein Liniendiagramm? Verwenden Sie chartjs?

Question

Ich brauche ein Liniendiagramm, zum Beispiel img.

1) Ich verstehe nicht, wie löschen Hintergrund grau. 2) Fügen Sie den dynamischen Punkt 0.38 und 2225 hinzu und fügen Sie die Zeile hinzu. Hilfe bitte.

Das ist mein Code

var canvas = document.getElementById("lineChart"); 
    var ctx = canvas.getContext("2d"); 

    var data = { 
     labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1], 
     datasets: [ 
      { 
       type: 'line', 
       label: 'Basic', 
       data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200] 
      } 
     ] 
    }; 


    var myNewChart = new Chart(ctx , { 
     type: "line", 
     data: data 
    }); 

Answer 1

1) Hier ist ein Beispiel, wie man nur die Zeile und nicht die Füllung unten zeigt. Im Grunde verwenden Sie einfach die fill: false Option.

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
   labels: 
[0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1], 
    datasets: [{ 
     label: 'Dataset 1', 
     borderColor: window.chartColors.blue, 
     borderWidth: 2, 
     fill: false, 
     data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200] 
    }] 
    }, 
    options: { 
    responsive: true, 
    title: { 
     display: true, 
     text: 'Chart.js Drsw Line on Chart' 
    }, 
    tooltips: { 
     mode: 'index', 
     intersect: true 
    }, 
    } 
}); 

2) Es gibt nichts nativ in chart.js gebaut ist Linien auf dem Diagramm zu zeichnen, aber das gleiche Team hat ein schönes Plugin erstellt namens chartjs-plugin-annotation die Sie verwenden können, dies zu tun. Hier ist ein Beispiel dafür, wie eine Linie an dem Punkt, konfigurieren, die Sie wollte (dies würde in Ihrem options Config gehen.

annotation: { 
    annotations: [{ 
    type: 'line', 
    mode: 'horizontal', 
    scaleID: 'y-axis-0', 
    value: 2225, 
    borderColor: 'rgb(75, 192, 192)', 
    borderWidth: 4, 
    label: { 
     enabled: true, 
     content: 'Point Label', 
     yAdjust: -16, 
    } 
    }] 
} 

hier ein codepen example ist, dass dies zeigt.

Answer 2

1) Versuchen Sie Datensätze:

fill: false, 

ihren Datensatz

2) nicht sicher, dass dies möglich ist

Dies wäre ein Kommentar aber ich kann noch nicht kommentieren.