Question

我的应用程序停止了，运行ng服务时出现以下错误：

我正在使用chartjs来制作动画

这是charts.component.ts文件中的代码

   

        /* ----------==========    Rounded Line Chart initialization    ==========---------- */
**Error start here**

        var data = {
          series: [[
            { x: 1, y: 100 },
            { x: 2, y: 50 },
            { x: 3, y: 25 },
            { x: 4, y: 66 },
            { x: 5, y: 30 },
            { x: 6, y: 22 }
          ]]
        };

        var options = {
          axisX: {
            type: Chartist.AutoScaleAxis
          },
          axisY: {
            type: Chartist.AutoScaleAxis
          },
        //   plugins: [
        //     Chartist.plugins.zoom({
        //     onZoom : function(chart, reset) { this.storeReset(reset); },
        //     })
        // ]
        };

        var chart = new Chartist.Line('.ct-chart', data, options);

        var dataRoundedLineChart = {
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
            series: [
                [12, 17, 7, 17, 23, 18, 38]
            ]
        };

Answer 1

传递给此方法的data参数：

var chart = new Chartist.Line('.ct-chart', data, options);

应该实现以下接口：

interface IChartistData {
    labels?: Array<string> | Array<number> | Array<Date>;
    series: Array<IChartistSeriesData> | Array<number> |  Array<Array<number>>;
}

您没有使用当前的data变量执行此操作：

 var data = {
     series: [[
         { x: 1, y: 100 },
         { x: 2, y: 50 },
         { x: 3, y: 25 },
         { x: 4, y: 66 },
         { x: 5, y: 30 },
         { x: 6, y: 22 }
     ]]
};

您无需提供x轴作为此数据的一部分。 Chartist将从数组中元素的位置推断出这一点。试试这个：

var data = {
    series: [
      [
        100,
        50,
        25,
        66,
        30,
        22
      ]
    ]
}

Answer 2

遗憾的是无法评论，我会在确认我的建议后进行编辑，

从我用剪贴画的例子看到的，'数据'期待一系列标签，这不是在这里。您可以尝试添加一个并查看它的作用吗？

Chartular on Angular 4打破了我的应用程序

2 个答案: