Question

我正在尝试让链接在我的图表中工作，但是当点击其中一个Pie Donut版本时我收到以下错误：

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

我将它上传到我的网络服务器，我发现它只是返回＆＃34; undefined＆＃34;。（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-＆gt; Events-＆gt; Click函数从系列移动到plotOptions而无效。

我该如何解决这个问题？

Answer 1

您看到的错误是JSFiddle告诉您，您要求的网址有问题。这是因为您的代码找不到正确的URL。要解决此问题，请将点击功能更改为：

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

此外，当您的代码将项添加到versionsData数组时，您需要为每个项添加一个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
      }
    }]
  });
});

Highcharts Pie Donut：单击URL时出错

1 个答案: