Как отобразить Highcharts в div с идентификатором в качестве контейнера - Angular? - PullRequest
Новая
       17

Как отобразить Highcharts в div с идентификатором в качестве контейнера - Angular?

0 голосов
/ 09 июля 2020

Я попытался написать приведенный ниже код. 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.

заранее СПАСИБО !!!

1 Ответ

1 голос
/ 09 июля 2020

Чтобы он работал, вам нужно указать тип для объекта 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

...