Question

我创建了一个使用Chart JS 2.7.1的Angular 1.6平台。

折线图在Google Chrome 64.0上呈现正常，但在Safari 10.1.2或Firefox 58.0.2上则不行。

ChartJS docs表示支持

Chrome 50+

Firefox 45+

Internet Explorer 11

Edge 14+

Safari 9 +

我得到的唯一错误是Firefox：ReferenceError: lso is not defined，这与ChartJS无关：

条形图和饼图在Safari和Firefox中正常运行;它只是线图，似乎有问题。轴被渲染，但没有线条出现（X轴也没有）：

在Chrome中：

This SO post说

你必须在画布声明之后放置你的脚本

我的指令将图表加载到页面上，并使用自己的模板HTML。模板HTML 应该在javascript之前加载（我不确定它是什么）。

我是否必须强制该指令等到其模板加载（as shown here）之后？我觉得Angular会抱怨，因为如果没有加载HTML，它将无法访问<canvas>元素。我试过这个，但它没有解决问题：

angular.element(document).ready(function() {
    run chart
    ... 
});

lineChart.html：

<div class="charts chart_{{chartId}}">
  <p class="subheading margin-bottom">stuff</p>
  <canvas id="line_chart_{{chartId}}"></canvas>
</div>

lineChart.js：

angular
    .module('LD')
    .directive('lineChart',['$rootScope', function ($rootScope) {
        return {
            restrict: 'E',
            scope: {
                data: '=',
                chartId: '@',
                ...
            },
            templateUrl: '/html/directives/charts/lineChart.html',
            link: function(scope, elem, attr) {
                var lineChart;

                // Watch for date changes affect incoming datasets. Redraw charts as needed
                scope.$watch('data', function(n, o) {
                    if (!scope.data) {
                        return;
                    }
                    drawChart();
                });

                var drawChart = function() {
                    if (lineChart || typeof lineChart !== 'undefined') {
                        lineChart.destroy();
                    }

                    var ctx = document.getElementById(`line_chart_${scope.chartId}`).getContext('2d');
                    ...

导致这种情况的原因是什么？

修改

在Firefox中，我收到以下警告：

不推荐使用mozImageSmoothingEnabled。请使用取而代之的是没有前缀的imageSmoothingEnabled属性。

当我console.log(lineChart)时，我看到了这个属性：

其中lineChart是：

lineChart = new Chart(ctx, {
    type: 'line',
    data : scope.data,
    options : getOptions()
});

这可能与它有关吗？

线图未在Firefox或Safari中呈现

0 个答案: