7
votes

Ligne de superposition sur graphique.js graphique

Je me demandais s'il était possible de superposer une ligne au-dessus d'un graphique graphique.js, tel qu'un graphique de ligne? Par exemple, sur l'axe X, une ligne horizontale serait dessinée à la valeur 20 sur le graphique

javascript chart.js

0 commentaires

3 Réponses :

7
votes

J'ai créé quelque chose appelé un tableau de superposition que j'ai ajouté à ma fourchette de graphique.js ( https : //github.com/LITHUB.com/leighquinceft/chart.js ) qui pourrait être utilisé dans cette situation. Il fonctionne de la même manière que comme une ligne de ligne ou de barre, seule la différence est que vous déclarez une propriété supplémentaire appelée type code> qui peut être 'Line' code> ou Barre ' code>. Ensuite, appelez simplement nouvelle carte (CTX) .overlay (données) code>.

Donc, pour votre exemple, vous pouvez simplement avoir votre graphique à barres, puis fourni un autre jeu de données (avec de meilleures couleurs que j'ai utilisées. ) Pour montrer la ligne. P>

p>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>

<canvas id="canvas" width="400"></canvas>

1 commentaires

Merci! Exactement ce que je cherchais. J'apprécie beaucoup.

6
votes

J'avais besoin de quelque chose de similaire, mais au lieu d'une ligne graphique em> J'en ai besoin comme une vraie ligne de superposition qui était à plat.

vient de prolonger le graphique comme suit: P>

new Chart(ctx).BarOverlay(data, options);

0 commentaires

2
votes

La réponse de Strangewill a été excellente comme une fondation, mais j'avais besoin de lignes verticales entraînées par des données sur un graphique à barres, ce qui l'a donc modifié comme suit:

J'ai d'abord ajouté une propriété à la matrice Options (ajouter un autre jeu de données est peut-être plus propre mais je voudrais ont dû dire que Chartjs ignore-le), où chaque option est une index de valeur de données que je souhaite mettre en évidence, à peu près comme suit: p> xxx pré>

J'ai ensuite modifié le code de Strangewill, s'étendant ITERATEZ la matrice d'éléments ci-dessus et dessinez des lignes verticales sur la barre indiquée. P>

Chart.types.Bar.extend({
    name: 'BarOverlay',
    draw: function (ease) {

        // First draw the main chart
        Chart.types.Bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;
        var barWidth = this.scale.calculateBarWidth(this.datasets.length);

        for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {

            var overlayBar = this.options.verticalOverlayAtBar[i];

            // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
            var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
            var y = this.scale.calculateY(2000);

            var bar_base = this.scale.endPoint

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(x, bar_base);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
        ctx.closePath();
    }
});

0 commentaires