rangeFilter добавление ненужных столбцов ng2-google-charts - PullRequest
Новая
       13

rangeFilter добавление ненужных столбцов ng2-google-charts

0 голосов
/ 05 мая 2018

Я испытываю некоторые нежелательные действия с ng2-google-charts. Я могу динамически добавлять скользящие средние, VWAP, RSI и другие функции. Я также могу получить доступ к ChartWrapper с помощью @ViewChild (). Однако при использовании rangeFilter он добавляет скользящие средние из ComboChart в rangeFilter, что выглядит нелепо. Это также вынуждает меня добавить все столбцы из dataTable, или просто выдает ошибку, сообщающую, что столбцы отсутствуют. Все, что я хочу отобразить, это диапазоны дат. Есть ли способ сделать это с ComboChart? Я проверил документ, и в нем говорится, что я должен иметь возможность указать это в представлении ChartWrapper с атрибутом columns. Однако это не работает. Любая помощь будет принята с благодарностью. Заранее спасибо, ребята. 

     const rangeFilter = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'cchart',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    chartArea: {
                        width: '90%',
                        backgroundColor: '#e5e5e5'
                    }
                },
                minRangeSize: 60000,
                snapToData: true
            }
        },
        view: {
            columns: [0, 1, 2, 3, 4]
        },
        state: {
            range: {
                start: startDate,
                end: endDate
            }
        }
    });

    if (document.getElementById('cchart')) {
        const dash = new google.visualization.Dashboard(document.getElementById('dashboard1'));
        const googleChartWrapper = this.schart.wrapper;
        dash.bind([rangeFilter], [googleChartWrapper]);
        dash.draw(data);
    }

1 Ответ

0 голосов
/ 06 мая 2018

Мне удалось заставить это работать, установив ряд в ChartRangeFilter, как показано ниже. 

getDateRangeFilter(cid: string, startDate: Date, endDate: Date): any {
    return new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: cid,
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    background: '#e5e5e5',
                    chartArea: {
                        backgroundColor: '#e5e5e5',
                        width: '98%',
                    },
                    series: {
                        0: { type: 'line', color: 'transparent' },
                        1: { type: 'line', color: 'transparent' },
                        2: { type: 'line', color: 'transparent'  },
                        3: { type: 'line', color: 'transparent' },
                        4: { type: 'line', color: 'transparent' },
                        5: { type: 'line', color: 'transparent' }
                    }

                },
                snapToData: true,
                hAxis: {
                    minValue: startDate,
                    maxValue: endDate
                  }
            }
        },
        view: [0],
        state: {
            range: {
                start: startDate,
                end: endDate
            }
        }
    });
}

Стоит также отметить, что если вы используете ComboChart со свечами и переходите от дней к минутам, то ваши даты необходимо установить с помощью следующего: 

processMinuteHeikenAshiChart(target, haLow, haOpen, haClose, haHigh, date, mvg, mvgx, vwap): any[] {
    const arrData = [];
    //include minutes and seconds
    const ndate = new Date(Date.UTC(date.getYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), 0, 0));
    arrData.push(ndate);
    arrData.push(haLow);
    arrData.push(haOpen);
    arrData.push(haClose);
    arrData.push(haHigh);

    switch (target) {
        case 'short':
            if (this.securityService.shortChartOptions.value.useSMA1) { arrData.push(mvg); }
            if (this.securityService.shortChartOptions.value.useSMA2) { arrData.push(mvgx); }
            if (this.securityService.shortChartOptions.value.showVWAP) { arrData.push(vwap); }
            break;
        case 'long':
            if (this.securityService.longChartOptions.value.useSMA1) { arrData.push(mvg); }
            if (this.securityService.longChartOptions.value.useSMA2) { arrData.push(mvgx); }
            if (this.securityService.longChartOptions.value.showVWAP) { arrData.push(vwap); }
    }

    return arrData;
}
...