更改 angular js 图表包装器以支持绘制自定义线

Question

基本上，我尝试取消选择 chartjs 的 angular 包装器来制作或公开一个函数来绘制已经创建的 canvas。

我有一个客户要求绘制一条垂直线，用于突出显示当前时间。疯了，我知道。

我将 angular 包装器集成到我当前的应用程序中，并希望使用图表助手 canvas，它包含一个绘制点的函数 - drawPoint: function(ctx, style, radius , x, y)..结果是无法访问..我正在核心控制器中挖掘但找不到任何有用的东西..

有谁知道我正在做的事情是否可以在不编辑 chartjs 的情况下实现？

干杯

讯超

Answer 1

我有一个类似的问题：我使用了一个绘图库来制作分层图表（称为 mermaidJS）并且需要进行自定义调整。

我所做的是：

检查相关的 canvas / SVG / HTML 标签（这里假设它是一个 canvas）
给它一个元素参考：

这样我就可以

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

通过尝试做我必须做的事情（在你的情况下，就是用原生 JS 找到你想要的轴，并在上面画一条线）

我希望这能对你有所帮助，因为我真的只能用这些信息做这些......

Answer 2

不需要修改核心ChartJS库

您可以使用名为 - chartjs-plugin-annotation.

的 ChartJS 插件来完成此操作

演示版

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。

更改 angular js 图表包装器以支持绘制自定义线

Alter angular js chart wrapper to support drawing custom lines

chart.js

angular-chart

angular