如何深入挖掘两个以上的高地图

时间:2018-09-20 13:20:28

标签: javascript angular

我实施了一个高地图,该地图从州到区仅向下钻取两个级别。但我需要深入了解各州,各地区以及其他地区。使用高图有可能进行3级深入分析吗??

<ORDER_HEADER>
  <HEADER_ROW>
    <ORIG_SYS_DOCUMENT_REF>001529872197</ORIG_SYS_DOCUMENT_REF>
    <SALESREP>
      <SALESREP_ROW/>
    </SALESREP>
    </SOLD_TO_CONTACT>
    <SHIP_TO_CONTACT>                                    --> This SHIP TO comes under ORDER HEADER
      <SHIP_TO_CONTACT_ROW>
        <PHONE_NUMBER>6042333125201</PHONE_NUMBER>
        <EMAIL_ADDRESS>abc@gmail.com</EMAIL_ADDRESS>
      </SHIP_TO_CONTACT_ROW>
    </SHIP_TO_CONTACT>
    <ORDER_LINES>
      <ORDER_LINES_ROW>
        <ORIG_SYS_LINE_REF>001521970</ORIG_SYS_LINE_REF>
        <ITEM_NUMBER>0158ABCSD012836</ITEM_NUMBER>
        <ORDERED_QUANTITY>2</ORDERED_QUANTITY>
        <SHIP_TO_CONTACT>                                --> This SHIP TO comes under ORDER LINES which again comes under ORDER HEADER
          <SHIP_TO_CONTACT_ROW/>
        </SHIP_TO_CONTACT>
        <INVOICE_TO_CONTACT>
          <INVOICE_TO_CONTACT_ROW/>
        </INVOICE_TO_CONTACT>
        <DELIVER_TO_CONTACT>
          <DELIVER_TO_CONTACT_ROW/>
        </DELIVER_TO_CONTACT>
      </ORDER_LINES_ROW>
    </ORDER_LINES>
  </HEADER_ROW>
</ORDER_HEADER>
/*
TODO:
- Check data labels after drilling. Label rank? New positions?
*/

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
    separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
    // Some responsiveness
    small = $('#container').width() < 400;

// Set drilldown pointers
$.each(data, function (i) {
    this.drilldown = this.properties['hc-key'];
    
    this.value = i; // Non-random bogus data
    //alert('drilldown: '+this.drilldown + ''+this.value);
});

// Instantiate the map
Highcharts.mapChart('container', {
    chart: {
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                    var chart = this,
                        mapKey = 'countries/us/' + e.point.drilldown + '-all',
                        // Handle error, the timeout is cleared on success
                        fail = setTimeout(function () {
                            if (!Highcharts.maps[mapKey]) {
                                chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
                                fail = setTimeout(function () {
                                    chart.hideLoading();
                                }, 1000);
                            }
                        }, 3000);
alert('test: '+mapKey);
                    // Show the spinner
                    chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

                    // Load the drilldown map
                    $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                        data = Highcharts.geojson(Highcharts.maps[mapKey]);

                        // Set a non-random bogus value
                        $.each(data, function (i) {
                            this.value = i;
                        });

                        // Hide loading and add series
                        chart.hideLoading();
                        clearTimeout(fail);
                        chart.addSeriesAsDrilldown(e.point, {
                            name: e.point.name,
                            data: data,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        });
                    });
                }

alert('test: '+e.point.drilldown);
                this.setTitle(null, { text: e.point.name });
            },
            drillup: function () {
                this.setTitle(null, { text: '' });
            }
        }
    },

    title: {
        text: 'Highcharts Map Drilldown'
    },

    subtitle: {
        text: '',
        floating: true,
        align: 'right',
        y: 50,
        style: {
            fontSize: '16px'
        }
    },

    legend: small ? {} : {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    colorAxis: {
        min: 0,
        minColor: '#E6E7E8',
        maxColor: '#005645'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    plotOptions: {
        map: {
            states: {
                hover: {
                    color: '#EEDD66'
                }
            }
        }
    },

    series: [{
        data: data,
        name: 'USA',
        dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
        }
    }, {
        type: 'mapline',
        data: separators,
        color: 'silver',
        enableMouseTracking: false,
        animation: {
            duration: 500
        }
    }],

    drilldown: {
        activeDataLabelStyle: {
            color: '#FFFFFF',
            textDecoration: 'none',
            textOutline: '1px #000000'
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                x: 0,
                y: 60
            }
        }
    }
});

如果您有任何解决方案,请帮助我。

0 个答案:

没有答案