mengqingchuang
/
k8swebapi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
							<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highmaps Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
#container {
	max-width: 400px; 
	height: 360px; 
	margin: 0 auto;
}
#table-div {
	max-width: 400px;
	margin: 3em auto;
}
		</style>
		<script type="text/javascript">
$(function () {

    // Load the data from the HTML table and tag it with an upper case name used for joining
    var data = [],
        // Get the map data
        mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

    Highcharts.data({
        table: document.getElementById('data'),
        startColumn: 1,
        startRow: 1,
        complete: function (options) {
            $.each(options.series[0].data, function () {
                data.push({
                    ucName: this[0],
                    value: this[1]
                });
            });
        }
    });

    // Process mapdata
    $.each(mapData, function () {
        var path = this.path,
            copy = {
                path: path
            };

        // This point has a square legend to the right
        if (path[1] === 9727) {

            // Identify the box
            Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

            // Place the center of the data label in the center of the point legend box
            this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
            this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);

        }
        // Tag it for joining
        this.ucName = this.name.toUpperCase();
    });


    // Initiate the chart
    $('#container').highcharts('Map', {

        title: {
            text: 'US unemployment rate 2015'
        },

        subtitle: {
            text: 'Small US map with data labels'
        },

        mapNavigation: {
            enabled: true,
            enableButtons: false
        },

        xAxis: {
            labels: {
                enabled: false
            }
        },

        colorAxis: {},

        series: [{
            mapData: mapData,
            data: data,
            joinBy: 'ucName',
            name: 'Unemployment rate per 2015',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.point.properties['hc-a2'];
                },
                style: {
                    fontSize: '10px'
                }
            },
            tooltip: {
                valueSuffix: '%'
            }
        }, {
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
            color: 'silver'
        }]
    });
});
		</script>
	</head>
	<body>
<script src="../../js/highmaps.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<div id="table-div">
    <table id="data">
        <tr>
            <td>1</td>
            <td>NEBRASKA</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NORTH DAKOTA</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>UTAH</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4</td>
            <td>VERMONT</td>
            <td>3.6</td>
        </tr>
        <tr>
            <td>5</td>
            <td>IOWA</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>MINNESOTA</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>NEW HAMPSHIRE</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>SOUTH DAKOTA</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>IDAHO</td>
            <td>3.9</td>
        </tr>
        <tr>
            <td>9</td>
            <td>MONTANA</td>
            <td>3.9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>HAWAII</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>11</td>
            <td>WYOMING</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>13</td>
            <td>COLORADO</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>13</td>
            <td>OKLAHOMA</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>13</td>
            <td>TEXAS</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>16</td>
            <td>KANSAS</td>
            <td>4.4</td>
        </tr>
        <tr>
            <td>17</td>
            <td>DELAWARE</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>17</td>
            <td>MASSACHUSETTS</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>17</td>
            <td>WISCONSIN</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>20</td>
            <td>MAINE</td>
            <td>4.7</td>
        </tr>
        <tr>
            <td>21</td>
            <td>VIRGINIA</td>
            <td>4.9</td>
        </tr>
        <tr>
            <td>22</td>
            <td>INDIANA</td>
            <td>5.1</td>
        </tr>
        <tr>
            <td>22</td>
            <td>KENTUCKY</td>
            <td>5.1</td>
        </tr>
        <tr>
            <td>24</td>
            <td>OHIO</td>
            <td>5.2</td>
        </tr>
        <tr>
            <td>25</td>
            <td>MARYLAND</td>
            <td>5.3</td>
        </tr>
        <tr>
            <td>25</td>
            <td>OREGON</td>
            <td>5.3</td>
        </tr>
        <tr>
            <td>27</td>
            <td>PENNSYLVANIA</td>
            <td>5.4</td>
        </tr>
        <tr>
            <td>27</td>
            <td>WASHINGTON</td>
            <td>5.4</td>
        </tr>
        <tr>
            <td>29</td>
            <td>MICHIGAN</td>
            <td>5.5</td>
        </tr>
        <tr>
            <td>30</td>
            <td>ARKANSAS</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>30</td>
            <td>FLORIDA</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>30</td>
            <td>NEW YORK</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>30</td>
            <td>NORTH CAROLINA</td>
            <td>5.7</td>
        </tr>
        <tr>
            <td>34</td>
            <td>ARIZONA</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>34</td>
            <td>MISSOURI</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>34</td>
            <td>TENNESSEE</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>37</td>
            <td>RHODE ISLAND</td>
            <td>5.9</td>
        </tr>
        <tr>
            <td>38</td>
            <td>CONNECTICUT</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>38</td>
            <td>ILLINOIS</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>40</td>
            <td>ALABAMA</td>
            <td>6.1</td>
        </tr>
        <tr>
            <td>41</td>
            <td>NEW MEXICO</td>
            <td>6.2</td>
        </tr>
        <tr>
            <td>42</td>
            <td>GEORGIA</td>
            <td>6.3</td>
        </tr>
        <tr>
            <td>43</td>
            <td>CALIFORNIA</td>
            <td>6.4</td>
        </tr>
        <tr>
            <td>44</td>
            <td>NEW JERSEY</td>
            <td>6.5</td>
        </tr>
        <tr>
            <td>45</td>
            <td>LOUISIANA</td>
            <td>6.6</td>
        </tr>
        <tr>
            <td>46</td>
            <td>MISSISSIPPI</td>
            <td>6.7</td>
        </tr>
        <tr>
            <td>47</td>
            <td>ALASKA</td>
            <td>6.8</td>
        </tr>
        <tr>
            <td>47</td>
            <td>SOUTH CAROLINA</td>
            <td>6.8</td>
        </tr>
        <tr>
            <td>49</td>
            <td>NEVADA</td>
            <td>7.0</td>
        </tr>
        <tr>
            <td>50</td>
            <td>WEST VIRGINIA</td>
            <td>7.2</td>
        </tr>
        <tr>
            <td>51</td>
            <td>DISTRICT OF COLUMBIA</td>
            <td>7.3</td>
        </tr>
    </table>
</div>
	</body>
</html>