高点图表(Highstocks)当您更改时段时,滚动条必须“跳转”到时段的开始

时间:2019-07-04 13:06:08

标签: highcharts angular6

我使用下拉列表更改数据,并且希望导航器始终处于所选时间段的开始,我该怎么办?

(我尝试使用setExtremes()无效)。谢谢。

chart

   `<highcharts-chart
    [Highcharts] = "Highcharts" 
    [options] = "chartOptions" 
    [constructorType]="chartConstructor"
    style = "width: 90%; margin: auto; height: 370px; display: 
    block;">
   </highcharts-chart>`



createMultiLineChart() {
this.chartOptions = {
    chart: {
    zoomType: 'x',
    },
    rangeSelector: {
    selected: 1,
    inputBoxBorderColor: '#00acba',
    inputStyle: {
        color: '#492e76',
        fontWeight: 'bold',
        fontSize: '13',
        borderRadius: 18
    },
    buttonTheme: {
        visibility: 'hidden'
    },
    labelStyle: {
        color: '#00acba',
        fontSize: '13'
    },
   },
    navigator: {
        enabled: false,
        margin: 40
    },
    series: [ 
    {
        type: 'line',
        name: this.translate.instant('charts.multi-line.bankDeposits'),
        color: '#c075af',
        data: this.bankDepositsItems, 
        lineWidth: 2
    },
    {
        type: 'line',
        name: this.translate.instant('charts.multi-line.telbond'),
        color:  '#957bc0',
        data: this.telbondItems,
        lineWidth:  2
    },
    {
        type: 'line',
        name: this.translate.instant('charts.multi-line.tenant'),
        color: '#00acba',
        data: this.tenantItems,
        lineWidth: 2,
        marker: {
            symbol: 'circle'
        },
    }
 ],
 tooltip: {
    useHTML: true,
    borderRadius: 15,
    borderWidth: 1,
},

yAxis:{         相反:错误,         className:'highcharts-color-0',         标签: {             风格:{                 颜色:“#00acba”,                 fontSize:this.yFontsize             },             格式化程序:function(){                 返回this.value +'%';             }         },         标题:{             对齐:“高”,             偏移量:0,             文字:this.translate.instant('line-chart.chart-title'),             旋转:0             y:-10,             风格:{                 颜色:“#00acba”,                 fontSize:'14',                 fontWeight:“ 600”             },         },         lineColor:'#00acba',         lineWidth:3     },     xAxis:{         类型:“ datetime”,         lineColor:'#492E76',         lineWidth:3,         标签: {             风格:{                 颜色:'#492E76'             },             格式:“ {value:%m.`%y}”,         },     },   }   }

 filterDataChart() {

    this.bankDepositsItems = this._multiLineChartData.map(element=> {
        return [element.yearMonth, element.bankDeposits];
    });
    this.telbondItems = this._multiLineChartData.map(element => {
        return [element.yearMonth, element.telbond]
    })
    this.tenantItems = this._multiLineChartData.map(element => {
        return [element.yearMonth, element.tenant]
    })}

0 个答案:

没有答案