直方图不应仅显示直方图本身的数据

时间:2018-03-20 14:43:10

标签: angular highcharts histogram

我正在尝试使用角度4绘制直方图。我将拥有一组数据,每个数据包含1000个值。如果有两个数组,我应该能够显示组织图。要求是只需要绘制直方图而不是数据。

下面的链接绘制了直方图以及数据。我需要隐藏当前显示为散点的数据位。我该怎么做?

http://jsfiddle.net/x51b6pvs/15/

角直方图分量

import { Component, Input,OnInit  } from '@angular/core';

@Component({
    selector: 'histogramchart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class HistogramChartComponent  {

    public options: any;
    chart: any;

    @Input() public series: any;


    ngOnInit(){
    }

    constructor() {

        this.options = {
              credits: {
                enabled: false
            },    
            title: {
                text: ''
            },
              chart: {
                type: 'histogram'
            },
             legend: {
                align: 'right',
                verticalAlign: 'bottom',
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20
            },

            xAxis: [{
                title: { text: 'Ending Surplus' },
                alignTicks: false
            }, {
                title: { text: 'Count of Ending Surplus' },
                alignTicks: false,

            }],

            yAxis: [{
                title: { text: '' }
            }, {
                title: { text: '' },

            }],

            series: [{
                 type: 'histogram',
                 xAxis: 1,
                 yAxis: 1,
                 zIndex: -1,
                  baseSeries: 's1',
                 showInLegend: false

            }]

        };
    }


    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw();
    }


    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

      redraw() {
        if (!this.chart) return;

        this.series.map(s => {
            if(s!=null)
            this.chart.addSeries(s);
        });    
      }
}

0 个答案:

没有答案