2016-08-04 7 views
0

をクリックしたときに、私はリンクが私のチャートで動作するようにしようとしていますが、パイドーナツバージョンのいずれかをクリックすると、私は次のエラーが表示されますHighchartsパイドーナツ:エラーURL

{"error": "Please use POST request"} 

私は私にそれをアップロード私はそれが単に "未定義"として返ってくるのを見る。 (www.mywebsite.com/undefined)

をここに私が使用しているコードである:

$(function() { 

var colors = Highcharts.getOptions().colors, 
    categories = ['Agua', 'Gas', 'Electricidad'], 
    data = [{ 
     y: 17.5, 
     color: '#c27ba0', 
     drilldown: { 
      name: 'Agua', 
      categories: ['Lavadora', 'Fregadero de platos', 'Inodoro', 'Regadera del baño'], 
      data: [5, 5, 5, 5], 
      url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'], 
      color: '#c27ba0' 
     } 
    }, { 
     y: 17.5, 
     color: '#f1c232', 
     drilldown: { 
      name: 'Gas', 
      categories: ['Sistema Calefacción', 'Calentador de agua', 'Estufa', 'Secadora de ropa'], 
      data: [5, 5, 5, 5], 
      url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'], 
      color: '#f1c232' 
     } 
    }, { 
     y: 72, 
     color: '#e06666', 
     drilldown: { 
      name: 'Electricidad', 
      categories: ['Aire acondicionado', 'Ventilador', 'Plancha', 'Secadora de Cabello', 'Focos', 
       'Lavadora', 'Televisión', 'Refrigerador', 'Horno de microondas', 'Aspiradora', 'Licuadora',             'Estereo', 'Cafetera', 'Computadora','Tostador','Extractor'], 
      data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5], 
      url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'], 
      color: '#e06666' 
     } 
    }], 
    browserData = [], 
    versionsData = [], 
    i, 
    j, 
    dataLen = data.length, 
    drillDataLen, 
    brightness; 


// Build the data arrays 
for (i = 0; i < dataLen; i += 1) { 

    // add browser data 
    browserData.push({ 
     name: categories[i], 
     y: data[i].y, 
     color: data[i].color, 
     url: data[i].url 
    }); 

    // add version data 
    drillDataLen = data[i].drilldown.data.length; 
    for (j = 0; j < drillDataLen; j += 1) { 
     brightness = 0.2 - (j/drillDataLen)/5; 
     versionsData.push({ 
      name: data[i].drilldown.categories[j], 
      y: data[i].drilldown.data[j], 
      color: Highcharts.Color(data[i].color).brighten(brightness).get() 
     }); 
    } 
} 

// Create the chart 
$('#container').highcharts({ 
    chart: { 
     type: 'pie' 
    }, 
    title: { 
     text: 'Ahorra Energia' 
    }, 
    yAxis: { 
     title: { 
      text: 'Fuente de Energia 
     } 
    }, 
    plotOptions: { 
     pie: { 
      shadow: false, 
      center: ['50%', '50%'], 
     } 
    }, 
    tooltip: { 
     valueSuffix: '%' 
    }, 
    series: [{ 
     name: 'Energia', 
     show: false, 
     data: browserData, 
     size: '60%', 
     dataLabels: { 
      formatter: function() { 
       return this.y > 5 ? this.point.name : null; 
      }, 
      color: '#ffffff', 
      distance: -60 
     } 
    }, { 
     name: 'Versions', 
     data: versionsData, 
     size: '80%', 
     innerSize: '50%', 
     point: { 
      events: { 
       click: function() { 
        location.href = this.series.options.url; 
       } 
      } 
     }, 
     dataLabels: { 
       formatter: function() { 
        return this.point.name 
       }, 
       color: 'black', 
       distance:-10 
     } 
    }] 
}); 

は})。

私のコードはjsfiddleにもあります。

また、Point-> Events-> Click関数を系列からplotOptionsを無駄に移動することで、動作させようとしました。

どうすればこの問題を解決できますか?

+0

は、私は、あなたのコード内で1つのURL(yahoo.comへのポイント)を見つけました。内側の円のスライスの3つすべてにURLを付ける必要がありますか?また、あなたは内側のパイスライスをクリックすることをユーザーに期待しているのですか?また、外側のパイスライスをクリックすることもできますか?これらのクリックはどのように処理する必要がありますか? –

+0

ああ、あなたのjsfiddleがあなたがここに投稿したコードと一致しないことに気付きました。 –

答えて

0

あなたが見ているエラーは、リクエストしているURLに問題があることを示すJSFiddleです。これは、コードが正しいURLを見つけられないことが原因です。それを修正するには、これにクリック機能を変更:あなたのコードがversionsData配列に項目を追加したとき

click: function(event) { 
    location.href = event.point.url; 
} 

また、あなたは、各項目にURLオブジェクトを追加する必要があります。これにあなたのversionsDataコードを変更します。

versionsData.push({ 
     name: data[i].drilldown.categories[j], 
     y: data[i].drilldown.data[j], 
     color: Highcharts.Color(data[i].color).brighten(brightness).get(), 
     url: data[i].drilldown.url[j] 
    }); 

を最後に、あなたのコードは次のようになります。

$(function() { 

    var colors = Highcharts.getOptions().colors, 
    categories = ['Agua', 'Gas', 'Electricidad'], 
    data = [{ 
     y: 17.5, 
     color: '#c27ba0', 
     drilldown: { 
     name: 'Agua', 
     categories: ['Lavadora', 'Fregadero de platos', 'Inodoro', 'Regadera del baño'], 
     data: [5, 5, 5, 5], 
     url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'], 
     color: '#c27ba0' 
     } 
    }, { 
     y: 17.5, 
     color: '#f1c232', 
     drilldown: { 
     name: 'Gas', 
     categories: ['Sistema Calefacción', 'Calentador de agua', 'Estufa', 'Secadora de ropa'], 
     data: [5, 5, 5, 5], 
     url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'], 
     color: '#f1c232' 
     } 
    }, { 
     y: 72, 
     color: '#e06666', 
     drilldown: { 
     name: 'Electricidad', 
     categories: ['Aire acondicionado', 'Ventilador', 'Plancha', 'Secadora de Cabello', 'Focos', 
      'Lavadora', 'Televisión', 'Refrigerador', 'Horno de microondas', 'Aspiradora', 'Licuadora', 'Estereo', 'Cafetera', 'Computadora', 'Tostador', 'Extractor' 
     ], 
     data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5], 
     url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'], 
     color: '#e06666' 
     } 
    }], 
    browserData = [], 
    versionsData = [], 
    i, 
    j, 
    dataLen = data.length, 
    drillDataLen, 
    brightness; 


    // Build the data arrays 
    for (i = 0; i < dataLen; i += 1) { 

    // add browser data 
    browserData.push({ 
     name: categories[i], 
     y: data[i].y, 
     color: data[i].color, 
     url: data[i].url 
    }); 

    // add version data 
    drillDataLen = data[i].drilldown.data.length; 
    for (j = 0; j < drillDataLen; j += 1) { 
     brightness = 0.2 - (j/drillDataLen)/5; 
     versionsData.push({ 
     name: data[i].drilldown.categories[j], 
     y: data[i].drilldown.data[j], 
     color: Highcharts.Color(data[i].color).brighten(brightness).get(), 
     url: data[i].drilldown.url[j] 
     }); 
    } 
    } 

    // Create the chart 
    $('#container').highcharts({ 
    chart: { 
     type: 'pie' 
    }, 
    title: { 
     text: 'Ahorra Energia' 
    }, 
    yAxis: { 
     title: { 
     text: 'Fuente de Energia' 
     } 
    }, 
    plotOptions: { 
     pie: { 
     shadow: false, 
     center: ['50%', '50%'], 
     } 
    }, 
    tooltip: { 
     valueSuffix: '%' 
    }, 
    series: [{ 
     name: 'Energia', 
     show: false, 
     data: browserData, 
     size: '60%', 
     dataLabels: { 
     formatter: function() { 
      return this.y > 5 ? this.point.name : null; 
     }, 
     color: '#ffffff', 
     distance: -60 
     } 
    }, { 
     name: 'Versions', 
     data: versionsData, 
     size: '80%', 
     innerSize: '50%', 
     point: { 
     events: { 
      click: function(event) { 
      location.href = event.point.url; 
      } 
     } 
     }, 
     dataLabels: { 
     formatter: function() { 
      return this.point.name 
     }, 
     color: 'black', 
     distance: -10 
     } 
    }] 
    }); 
}); 
+0

説明をありがとう、このコードは動作します。 – Tirux