Highcharts：更改劇情區域的光標

向用戶提示該圖表可縮放的好方法是什麼？我製作了可縮放的圖表（chart: { zoomType: 'xy' }），現在我想通過更改繪圖區域的光標（以及繪圖區域）向用戶發信號。通過/Highcharts：更改劇情區域的光標

你可以將光標一系列實際的圖形：

plotOptions: { 
    series: { 
    cursor: 'zoom-in' 
    } 
}

我想要做相反的事：改變只背景/繪圖區。
不是實際的圖形。不是傳說。不軸線的線外，等

來源

2015-09-08 Julian Lettner

你要放大圖表的背景是什麼？ –

感謝Luxx的幫助，我發現了一個更簡單的方法來實現這一點。

chart: { 
    // ... 
    backgroundColor: "transparent", 
    plotBackgroundColor: "transparent", // Needs to be set for chart.plotBackground to be defined. 
    zoomType: "xy", 
    events: { 
    load: function() { this.plotBackground.htmlCss({ cursor: "zoom-in" }) } 
    } 
}

例子：http://jsfiddle.net/y7dy6wLn/2/

來源

2015-09-12 00:10:41

添加zoomType屬性附加傷害到主圖表部

zoomType：「XY」

沒有改變光標爲選項我可以改變它的背景圖形元素，因爲我知道。

這裏是一個小提琴示例：請記住，您必須選擇要放大的區域（類似於您在桌面上進行的選擇，而不管您使用的是哪個操作系統）。

代碼：

chart: { 
      type: 'line', 
      zoomType: 'xy' 
     },

小提琴：http://jsfiddle.net/eugensunic/vhn78x0a/

來源

2015-09-09 00:12:35

所以，這並不是真正的問題，但因爲我不知道期權的像一個OP請求，我決定放棄我關於向用戶暗示圖表是可縮放的最佳方式的想法，因爲這個問題實際上是提出的。

我認爲這通常取決於用戶以及圖表使用的上下文，但我喜歡使用文本 - 因爲它很簡單並且沒有任何誤解的空間。

在Highcharts我們可以使容器內的元素在很多不同的方式，但爲了這個，我只是選擇了標籤，因爲我認爲這是很好

TEXT = chart.renderer.label('Click points to zoom', 70, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop) 
     .css({ 
      color: '#FFFFFF' 
     }) 
     .attr({ 
      fill: 'rgba(0, 0, 0, 0.75)', 
      padding: 8, 
      r: 5, 
      zIndex: 6 
     }); 
     TEXT.add();

有了這個，我們得到的左上角有一個盒子角，告訴用戶點可以被點擊放大。現在，我們不希望它一直在那裏 - 這很煩人。所以我們編寫一個函數來在容器被點擊時將其刪除。

$('#chart-container').bind('mousedown', function() { 
      TEXT.destroy(); 
     });

小提琴：http://jsfiddle.net/hx1rg2jr/5/

來源

2015-09-10 17:25:39 user3471881

感謝您付出額外的努力並提出了一種替代方法。我喜歡！ –

您可以改變光標的背景。您可以使用highchart中包含的SVGElement.prototype.htlmCss（）函數。調用它的方法之一是通過使用載事件：

chart: { 
    /* some other code */ 
    events: { 
     load: function() { 
      this.chartBackground.htmlCss({cursor:'zoom-in'}); 
     } 
    } 
}

例這裏http://jsfiddle.net/84ek687h/2/

我Highcharts JS 4.1版進行了測試。8

編輯＃1

應設置背景屬性是這樣的：

chart:{ 
    zoomType: 'xy', 
    style:{ 
     cursor:'zoom-in' 
    } 
}

編輯＃2

的問題，因爲你在評論中提到，是地塊面積不能填滿整個集裝箱地區。爲此，您可能不得不離開Hichcharts選項。一種解決方案是使用plotTop，plotLeft，plotHeight和Highcharts的plotWidth VAR和建立自己的解決方案。一個解決辦法草案我會給這是使用jQuery： http://jsfiddle.net/84ek687h/5/

$('#container').mousemove(function(e){ 
     var cPos = $(this).position(), 
      xPos = e.pageX-cPos.left, 
      yPos = e.pageY-cPos.top, 
      HC = $(this).highcharts(); 
     if(yPos > HC.plotTop && yPos < (HC.plotTop +HC.plotHeight) && 
      xPos > HC.plotLeft && xPos < (HC.plotLeft+HC.plotWidth)){ 
      HC.chartBackground.htmlCss({cursor:'zoom-in'}); 
     }else{ 
      HC.chartBackground.htmlCss({cursor:''}); 
     } 
    });

通過使用chartBackground.htmlCss（）函數，你要確保它被設置爲背景，而不是如果你懸停上述系列，圖表，等等。

來源

2015-09-10 18:08:33 Luxx

這最接近我最初的想法。謝謝！有一件事：你注意到光標在繪圖區域外的背景上也是不同的，即，如果我點擊拖動那裏，雖然光標是放大鏡，但沒有任何反應。任何想法如何使光標只在繪圖區的背景中改變？ –

Highcharts：更改劇情區域的光標

回答

相關問題