Question

我想在堆叠的100％条形图的每个段上放置特定的链接..

堆积条形图的演示：http://www.highcharts.com/demo/bar-stacked

详细说明我在做什么以及我在寻找的是：请转到http://barchart.worddss.com/new/并填写左表中的数据并提交。

提交后，您可以看到每个不同的颜色段都有不同的网址，但网址如下：http://barchart.worddss.com/new/url2&value=2

即。我可以为每个固定的颜色段和标签值后面提供固定的URL。

但我想要的是，每个细分受众群都有不同的网址..例如黄色google.com，绿色到fb.com等。

我正在使用的代码是：

function show () { var m1=document.getElementById('m1').value;
  var m2=document.getElementById('m2').value;
  var m3=document.getElementById('m3').value;
  var m4=document.getElementById('m4').value;
  var m5=document.getElementById('m5').value;
  var m6=document.getElementById('m6').value;
  var m7=document.getElementById('m7').value;
  var c1=document.getElementById('c1').value;
  var c2=document.getElementById('c2').value;
  var c3=document.getElementById('c3').value;
  var c4=document.getElementById('c4').value;
  var c5=document.getElementById('c5').value;
  var c6=document.getElementById('c6').value;
  var c7=document.getElementById('c7').value;
  var e1=document.getElementById('e1').value;
  var e2=document.getElementById('e2').value;
  var e3=document.getElementById('e3').value;
  var e4=document.getElementById('e4').value;
  var e5=document.getElementById('e5').value;
  var e6=document.getElementById('e6').value;
  var e7=document.getElementById('e7').value;


var seriesData = [];
seriesData.push({
    name: "Por cursar",
    data: [parseFloat(e7),parseFloat(c7),parseFloat(m7)],
   url: ["url1","egg","gfhf"]
});
seriesData.push({
    name: "Acreditados",
    data: [parseFloat(e6),parseFloat(c6),parseFloat(m6)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 4",
    data: [parseFloat(e5),parseFloat(c5),parseFloat(m5)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 3",
    data: [parseFloat(e4),parseFloat(c4),parseFloat(m4)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 2",
    data: [parseFloat(e3),parseFloat(c3),parseFloat(m3)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 1",
    data: [parseFloat(e2),parseFloat(c2),parseFloat(m2)],
    url: "url1"
});
seriesData.push({
    name: "Por acreditar",
    data: [parseFloat(e1),parseFloat(c1),parseFloat(m1)],
    url: "url2"
});
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    credits: {
        enabled: false
    },
    title: {
        text: "CURSO ACTUAL"
    },
    xAxis: {

        allowDecimals: false,
         categories: ['Español', 'Ciencias', 'Matematicas']
    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
            text: ""
        }
    },
    legend: {
        backgroundColor: '#FFFFFF',
        reversed: true
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            stacking: 'percent',
             dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                style: {
                    textShadow: '0 0 3px black'
                }
            },
            point: {
                events: {
                    click: function () {
                    window.location =(this.series.options.url + "&value=" + this.y); 
                       // alert(this.series.options.url + "&y=" + this.y);         
                    }
                }
            }

        }

    },
    series: seriesData
});}

Answer 1

我不完全确定你是想要每个颜色（系列）还是每个真段（点）的网址。因此，我做了一个混合的。

让我们说一些系列你需要每个系列链接和每个点的另一个链接。如果URL与点值一起提供，前者看起来更自然。

seriesData.push({
    name: "Por cursar",
    data: [{y:1, url:'http://facebook.com'}, {y:2, url:'http://google.com'}, {y:3, url: 'http://amazon.com'}]
});
seriesData.push({
    name: "Acreditados",
    data: [1, 2, 3],
    url: "http://cnn.com"
});

此案例您单击处理程序必须

 point: {
   events: {
     click: function () {
       var point = this;

       if (point.url) { //if url is per point as in Por cursar
         window.open(point.url);
       } else if (point.series.userOptions.url){ //if url is per serie as in Acreditados
         window.open(point.series.userOptions.url);
       }
     }
   }
 }

可在此处找到完整的样本http://plnkr.co/edit/j3NgoNWa6rwPgBGIJDwm

Highchart：将href添加到堆叠条形图的每个段

1 个答案: