カスタムラインの描画をサポートする角度jsチャートラッパーを変更する

Question

基本的には、既に作成されたキャンバスに描画する関数を作成または公開するためにchartjsの角ラッパーをアンピックしようとします。

私は現在の時刻を強調表示するために使用される単一の垂直線を描画するための顧客要件を持っています。クレイジー、私は知っている。

私は、現在のアプリケーションに統合された角度ラッパーを得て、ポイントを描画する関数を含むチャートヘルパーキャンバスを使用したいと考えていました - drawPoint：function（ctx、style、radius、x、y）..それはアクセスできない。私はコアコントローラで掘り下がっているが使用するものは何も見つけることができない。

chartjsを編集せずに私がやっていることが可能なら誰でも知っている？

乾杯

XunChao

Answer 1

いいえは、ChartJSの中核となるライブラリを変更する必要があります。

これは、 - chartjs-plugin-annotationというChartJSプラグインを使用して実行できます。

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>

このプラグインとそのユースケースの詳細については、hereを参照してください。

Answer 2

は、私は同様の問題を持っていた：私は（mermaidJSと呼ばれる）は、階層グラフを作成する描画ライブラリを使用し、カスタム調整を行う必要がありました。私が何をしたか

た：

• 懸念キャンバス/ SVG/HTMLタグを点検し（ここでのそのにキャンバスを言わせて）
• それに要素の参照を与える：

だからI

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

• を行うことができますかどのようなI試してみる必要がありました（あなたの場合、ネイティブJSで必要な軸を見つけてそれに線を引くことです）

私ができることは本当にありがとうそのような情報を持つ...