Modifier le wrapper de graphique js angulaire pour prendre en charge les lignes personnalisées de dessin

Question

Fondamentalement, j'essaie de décocher l'enveloppe angulaire de chartjs pour créer ou exposer une fonction à dessiner sur le canevas déjà créé.

J'ai besoin d'un client pour dessiner une seule ligne verticale qui sera utilisée pour mettre en évidence l'heure actuelle. Fou, je sais.

J'ai récupéré le wrapper angulaire dans mon application actuelle et j'espérais utiliser le canvas helper canvas qui contient une fonction pour dessiner un point - drawPoint: fonction (ctx, style, rayon, x, y). ce n'est pas accessible .. Je suis en train de creuser dans le contrôleur de base, mais ne trouve rien d'utilisation ..

Est-ce que quelqu'un sait si ce que je fais est possible sans modifier chartjs?

Vive

XunChao

Answer 1

N ° besoin de modifier la bibliothèque ChartJS de base.

Vous pouvez accomplir cela en utilisant un plugin ChartJS appelé - chartjs-plugin-annotation.

DEMO

var app = angular.module('app', ['chart.js']); 
 

 
app.controller("LineCtrl", function($scope) { 
 
    $scope.labels = ["2017-03-09", "2017-03-10", "2017-03-11", "2017-03-12", "2017-03-13", "2017-03-14"]; 
 
    $scope.colors = ['#07C']; 
 
    $scope.data = [ 
 
     [3, 2, 5, 1, 4, 2] 
 
    ]; 
 
    $scope.options = { 
 
     legend: { 
 
     display: true 
 
     }, 
 
     scales: { 
 
     xAxes: [{ 
 
      type: 'time' 
 
     }] 
 
     }, 
 
     annotation: { 
 
     annotations: [{ 
 
      type: 'line', 
 
      mode: 'vertical', 
 
      scaleID: 'x-axis-0', 
 
      value: '2017-03-11', 
 
      borderColor: 'red', 
 
      borderWidth: 2 
 
     }] 
 
     } 
 
    } 
 
    $scope.datasetOverride = [{ 
 
     label: 'TIME', 
 
     fill: false 
 
    }]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script> 
 
<div ng-app="app" ng-controller="LineCtrl"> 
 
    <canvas id="line" class="chart chart-line" chart-data="data" chart-colors="colors" chart-labels="labels" chart-options="options" chart-dataset-override="datasetOverride"></canvas> 
 
</div>

Pour en savoir plus sur ce plug-in et ses cas d'utilisation, reportez-vous here.

Answer 2

moi avons eu un problème similaire: j'ai utilisé une bibliothèque de dessin pour faire des graphiques hiérarchiques (appelés mermaidJS) et nécessaires pour faire des ajustements personnalisés.

Ce que je ne faisais que:

• Inspectez la toile concernée/SVG/balise HTML (ici, nous allons le dire une toile)
• Donnez-lui une référence Élément:

Alors que je pourrait faire

<canvas #myCanvas id="mermaidJS"></canvas> 
// Component 
@ViewChild('myCanvas'): ElementRef; 

• Faites ce que je a dû faire en essayant (dans votre cas, il serait de trouver l'axe que vous voulez avec JS natif, et tracer une ligne sur elle)

J'espère que cela peut vous aider, parce que vraiment c'est tout ce que je peux faire avec de telles informations ...