未在Highcharts中顯示數據

Question

我正試圖結合來自Highcharts的幾個不同的圖表演示。

我的例子是：Data classes and popup和Small US with data labels

我想從第一與第二的彈出功能的地圖。我需要將地圖連接到我自己的Google電子表格，但現在我只是試圖從第一個示例中獲取數據。

這是我到目前爲止，但似乎無法得到在地圖的任何數據。我想我有一個joinBy問題，我可能還在，但是當我設置joinBy爲null，我認爲「地圖項目被它們的數組中的位置加入」，但什麼都沒有發生。

https://jsfiddle.net/9eq6mydv/

$(function() { 
// Load the data from a Google Spreadsheet 
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html 
Highcharts.data({ 

    googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc', 
    googleSpreadsheetWorksheet: 1, 

    // custom handler for columns 
    parsed: function (columns) { 

     // Make the columns easier to read 
     var keys = columns[0], 
      names = columns[1], 
      percent = columns[10], 
     // Initiate the chart 
     options = { 
      chart : { 
       renderTo: 'container', 
       type: 'map', 
       borderWidth : 1 
      }, 

      title : { 
       text : 'US presidential election 2008 result' 
      }, 

      subtitle: { 
       text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' + 
        '_2008#Election_results">Wikipedia</a>' 
      }, 

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

      legend: { 
       align: 'right', 
       verticalAlign: 'top', 
       x: -100, 
       y: 70, 
       floating: true, 
       layout: 'vertical', 
       valueDecimals: 0, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)' 
      }, 

      colorAxis: { 
       dataClasses: [{ 
        from: -100, 
        to: 0, 
        color: '#C40401', 
        name: 'McCain' 
       }, { 
        from: 0, 
        to: 100, 
        color: '#0200D0', 
        name: 'Obama' 
       }] 
      }, 

      series : [{ 
       data : data, 
       dataLabels: { 
        enabled: true, 
        color: '#FFFFFF', 
        format: '{point.code}', 
        style: { 
         textTransform: 'uppercase' 
        } 
       }, 
       mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']), 
       joinBy: keys, 
       name: 'Democrats margin', 
       point: { 
        events: { 
         click: pointClick 
        } 
       }, 
       tooltip: { 
        ySuffix: ' %' 
       }, 
       cursor: 'pointer' 
      }, { 
       type: 'mapline', 
       data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'), 
       color: 'silver' 
      }] 
     }; 

     /** 
     * Event handler for clicking points. Use jQuery UI to pop up 
     * a pie chart showing the details for each state. 
     */ 
     function pointClick() { 
      var row = this.options.row, 
       $div = $('<div></div>') 
        .dialog({ 
         title: this.name, 
         width: 400, 
         height: 300 
        }); 

      window.chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: $div[0], 
        type: 'pie', 
        width: 370, 
        height: 240 
       }, 
       title: { 
        text: null 
       }, 
       series: [{ 
        name: 'Votes', 
        data: [{ 
         name: 'Obama', 
         color: '#0200D0', 
         y: parseInt(columns[3][row], 10) 
        }, { 
         name: 'McCain', 
         color: '#C40401', 
         y: parseInt(columns[4][row], 10) 
        }], 
        dataLabels: { 
         format: '<b>{point.name}</b> {point.percentage:.1f}%' 
        } 
       }] 
      }); 
     } 

     // Read the columns into the data array 
     var data = []; 
     $.each(keys, function (i, key) { 
      data.push({ 
       key: key,//.toUpperCase(), 
       value: parseFloat(percent[i]), 
       name: names, 
       row: i 
      }); 
     }); 

     // Initiate the chart 
     window.chart = new Highcharts.Map(options); 
    }, 

    error: function() { 
     $('#container').html('<div class="loading">' + 
      '<i class="icon-frown icon-large"></i> ' + 
      'Error loading data from Google Spreadsheets' + 
      '</div>'); 
    } 
}); 
}); 

UPDATE：

我想與大家我的最終解決方案分享。雖然Ondkloss在回答我的問題方面做得非常出色，但彈出式功能仍然無效，這是因爲我忘記了爲.dialog調用包含jQuery。一旦我包括我有一個空的彈出與highchart error 17，這是因爲highmaps.js代碼不包括餅圖類。所以我不得不添加highcharts.js代碼，然後包含map.js模塊。你可以看到我的final jsfiddle here。再次

感謝Ondkloss的出色答卷！

Answer 1

這裏的問題主要歸結爲使用joinBy。還要糾正它，您的data和mapData需要更改。

目前您joinBy是一個字符串數組，如["al", "ak", ...]。這不是joinBy選項的可接受格式。您可以在the API documentation細節上讀了，但最簡單的方法是有一個共同的屬性，data和mapData然後在joinBy，然後按該屬性加入這兩個陣列提供一個字符串。例如：

series : [{ 
    data : data, 
    mapData: mapData, 
    joinBy: "hc-key", 
] 

這裏"hc-key"屬性必須同時存在於data和mapData。

以下是我會在你的代碼創建data變量：

var data = []; 
$.each(keys, function (i, key) { 
    if(i != 0) 
     data.push({ 
      "hc-key": "us-"+key, 
      code: key.toUpperCase(), 
      value: parseFloat(percent[i]), 
      name: names[i], 
      row: i 
     }); 
}); 

這將跳過第一個關鍵，這僅僅是"Key"（列標題）。在這裏，我們使"hc-key"適合我們地圖數據中"hc-key"的格式。一個例子是"us-al"。剩下的只是要加入的元數據。請注意，在填充數據之前，您在選項中引用了數據，因此必須在此之前將其移出。

這是我怎麼會在你的代碼創建mapData變量：

var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']); 

// 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(); 
}); 

第一部分是你的「標準地圖數據」。剩下的就是爲彈出狀態正確居中標籤，並直接從示例中獲取。

而瞧，請參閱this JSFiddle demonstration見證你的地圖在行動。

我建議做一些console.log -ing怎麼看data和mapData有共同的hc-key，並且導致了一系列的數據連接。