时间戳

首页 > 解决方案 > 如何将 Highcharts 渲染为 id 作为容器的 div - Angular？

angular - 如何将 Highcharts 渲染为 id 作为容器的 div - Angular？

问题描述

我试过写下面的代码。html:

<div id="container"></div>

Ts 组件：

var chart = Highcharts.chart('container', {
 
    chart: {
 
       type: 'bar',
        marginLeft: 100,
         plotAreaWidth: 50,
          plotAreaHeight: 450,
    },
 
    title: {
        text: 'Bar series - data sorting'
    },
 
    yAxis: {
        title: {
            text: ''
        }
    },
 
    xAxis: {
        type: 'category',
        min: 0,
        labels: {
            animate: false
        }
    },
 
    legend: {
        enabled: false
    },
 
    series: [{
        zoneAxis: 'x',
        zones: [{
            value: 2,
            color: 'red'
        }],
        dataLabels: {
            enabled: true,
            format: '{y:,.2f}'
        },
        dataSorting: {
            enabled: true,
            sortKey: 'y'
        },
        data: [["hello",1],["hello",1],["hello",1],["hello",1],]
    }]
 
});

我收到以下错误：

error TS2769: No overload matches this call.
      Overload 1 of 2, '(options: Options, callback?: ChartCallbackFunction): Chart', gave the following error.
        Type '"container"' has no properties in common with type 'Options'.
    
    426   var chart = Highcharts.chart('container', {

即使我遇到错误，我也可以在容器中看到图表呈现。谁能建议我如何解决这个错误，我正在使用 Visual Studio 作为 IDE。

提前致谢！！！

标签： angulartypescripthighcharts

解决方案

要使其工作，您需要指定chartOptions 对象的类型，并从chartOptions 中删除无效的属性（没有像chart.plotAreaHeight,chart.plotAreaWidth或那样的属性labels.animate）。然后您需要为每个系列指定一个类型（在您的情况下只需添加type: 'bar'）。正如您在下面附加的演示中所看到的，在进行了这些更正之后，一切都正常工作。

现场演示：
https ://stackblitz.com/edit/highcharts-angular-basic-line-dg4fpj

另外，请记住，建议在使用 angular 时使用官方的 highcharts-angular 包装器。您可以在此处找到有关用法的更多信息：https ://github.com/highcharts/highcharts-angular

现场演示：（使用 highcharts-angular 制作的相同图表）：
https ://stackblitz.com/edit/highcharts-angular-basic-line-txhzcr

推荐阅读