Highcharts Stacked Percentage Column Hyperlink

Question

У меня есть Stacked% Column Highchart, который без гиперссылок на наборах данных работает отлично, однако мне нужно связать прочь с другой страницей с графика. Если бы это была стандартная диаграмма столбцов, у меня не было бы проблем (У меня уже есть). Но я не могу понять, почему я получаю неопределенную ошибку в ссылке.

Ive искал для рабочего примера, но havent смог найти один соответствующий столбчатый процентный столбец.

Я установил скрипку, чтобы указать, где находится im, любая помощь оценивается.

$(function() { 
$('#container').highcharts({ 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: 'Space Overview' 
    }, 
    xAxis: { 
    categories: ['a', 'b', 'c', 'd'] 
    }, 
    yAxis: { 
    min: 0, 
    title: { 
     text: 'Total Space (%)' 
    } 
    }, 
    tooltip: { 
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>', 
    shared: true 
    }, 
    plotOptions: { 
    column: { 
     stacking: 'percent' 
    }, 
    series: { 
     cursor: 'pointer', 
     point: { 
     events: { 
      click: function() { 
      location.href = this.options.url; 
      } 
     } 
     } 
    } 
    }, 
    subtitle: { 
    text: '+ Items relate to items in the dispay cabinets.', 
    align: 'left', 
    x: 10 
    }, 
    series: [{ 
    name: 'Free', 
    data: [1498, 1123, 556, 1176], 
    url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d'] 
    }, { 
    name: 'Used', 
    data: [1234,233,23,759], 
    url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d'] 
    }] 
}); 

http://jsfiddle.net/Mooglekins/qv8z5a2o/

Answer 1

Это большой вопрос! Я сделал рытье и думаю, что нашел для вас хорошее решение.

Во-первых, мне нужно было обновить, как вы определили пользовательское значение в своей серии. Чтобы зафиксировать определенные значения в events, я переместил атрибут url в каждую точку данных. Итак, теперь каждая точка имеет значение y и новое значение url.

(Примечание:. Я использовал фиктивные адреса здесь, так как я не был бы в состоянии соединиться с теми, предоставленными вами за пределами вашего сайта)

series: [{ 
    name: 'Free', 
    data: [ 
     { y: 1498, url: 'http://www.google.com' }, 
     { y: 1123, url: 'http://www.yahoo.com' }, 
     { y: 556, url: 'http://www.bing.com' }, 
     { y: 1176, url: 'http://www.msn.com' } 
    ] 
    }, { 
     // second series here 
    } 
] 

Далее, я обновил свой events вызов. Теперь, когда мы переместили атрибут url в каждую точку, мы можем ссылаться на это значение как point.url (как вы могли бы y с использованием point.y).

Я также здесь использовал window.open против window.location. Это будет лучшим опытом для ваших пользователей, чтобы они не упускали из виду диаграмму. Держите это, если хотите.

plotOptions: { 
    column: { 
     stacking: 'percent' 
    }, 
    series: { 
     cursor: 'pointer', 
     point: { 
      events: { 
       click: function (event) { 
        window.open(event.point.url); 
       } 
      } 
     } 
    } 
} 

Вот ваша обновленная скрипка с этими изменениями: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/

Я надеюсь, что это помогает!