Highcharts: добавьте кнопку пользовательского изображения

Я хочу добавить кнопку и изображение на высоких графиках. До сих пор я успешно создал кнопку изображения и добавил на нее событие клика. Но проблема в том, что изображение (sun.png) находится на левой стороне диаграммы, а кнопка изображения выравнивается по правому краю (позиция по умолчанию панели инструментов). Любое исправление для этого?Highcharts: добавьте кнопку пользовательского изображения

exporting: { 
    buttons: { 
     popUpBtn: { 
      symbol: 'url(images/sun.png)', 
      _titleKey: 'popUpBtnTitle', 
      x: -10, 
      symbolFill: '#B5C9DF', 
      hoverSymbolFill: '#779ABF', 
      onclick: function() { 
       alert('ad'); 
       popUpChart($(this)); 
      } 
     }, 
     exportButton: { 
      enabled: false 
     }, 
     printButton: { 
      enabled: false 
     } 

    } 
}

Кроме того, если есть другие способы добавления изображения в диаграмму с клик-событием, эти методы также приветствуются.

источник

2012-02-09 Jashwant

Привет, Я хочу такую же функциональность после нажатия одной кнопки на диаграмме. Мне нужен тот же график, который будет открыт во всплывающем окне. Посмотрев на свой код, вы, похоже, делаете то же самое. Не могли бы вы рассказать мне, что вы делаете в этой функции popUpChart ($ (this)); чтобы показать его во всплывающем окне. – Apparatus

'$ this' в' popUpChart' относится к экземпляру highcharts. Я использую это, чтобы снова получить параметры диаграммы, затем открываю всплывающее окно, подобное fancybox. И в этом всплывающем окне я снова рисую диаграмму. – Jashwant

Если вы не возражаете, можете ли вы показать весь свой код, потому что я столкнулся с некоторыми проблемами при этом? – Apparatus

Наконец-то я понял это. Может быть, это поможет другим.

function callback($this){ 
    var img = $this.renderer.image('images/zoom_icon.png',$this.chartWidth-40,5,40,12); 
    img.add(); 
    img.css({'cursor':'pointer'}); 
    img.attr({'title':'Pop out chart'}); 
    img.on('click',function(){ 
       // prcessing after image is clicked 
    }); 

} 

new Highcharts.Chart(charts.params,callback); 

// where charts.params is object which contains options for chart

источник

2012-02-23 19:26:39 Jashwant

Можно ли добавить еще одну кнопку рядом с экспортом и печатью? –

Да, определенно. См. Положение кнопки x. '$ This.chartWidth-40'. Его рядом с этими кнопками. Вы можете изменить его на что угодно. – Jashwant

В основном я хочу три кнопки вместо печати и экспорта. –

Highcharts: добавьте кнопку пользовательского изображения

ответ

Смежные вопросы