Highcharts 파이 도넛 : 오류 URL

Question

내 차트에서 작업 링크를 만들려고 노력하고 있습니다를 클릭하지만 파이 도넛 버전 중 하나를 클릭했을 때 다음과 같은 오류가 나타나면

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

내가 그것을 업로드 내 웹 서버와 나는 단순히 "undefined"로 반환한다는 것을 알았습니다. (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으로 이동하여 작동 시키려고했습니다.

어떻게 해결할 수 있습니까?

Answer 1

오류는 요청한 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 
     } 
    }] 
    }); 
});