只有最小和最大系列值的Highchart軸

在我們應用程序的圖表中，我們希望避免過多的信息污染屏幕。只有最小和最大系列值的Highchart軸

我們需要一個只顯示最低和最高值的軸。

有沒有人知道如何用Highchart做到這一點？

那麼這將是類似的東西

PS：無視圖表背後的灰色豎帶，這是一個完全無關。

2016-01-20 Georges Legros

可能有多種方式。我首先會看tickPositions，您可以在其中顯式設置值，或者在tickAmount處，您可以指定它只顯示兩個值，並且仍然使用其常規算法來確定它們：http：//api.highcharts。 com/highcharts＃yAxis.tickAmount | http://api.highcharts.com/highcharts#yAxis.tickPositions – jlbriggs

我認爲tickPositions是我正在尋找，謝謝，我會進一步調查 –

您還可以使用tickPositioner從數據中提取最小/最大值並返回兩個值的數組。

yAxis: { 
    tickPositioner: function() { 
    return [this.dataMin, this.dataMax]; 
    } 
},

例子： - http://jsfiddle.net/rchdfb0z/

來源

2016-01-21 13:47:20

不錯 - 我不知道dataMin和max都暴露在那裏。這確實會遇到與我的答案中提到的相同的問題[蜱成爲軸的最小和最大值]，可以用相同的方法修正（除非最大值仍需要計算） – jlbriggs

是的，我正在投票一個以及this.dataMin和dataMax確實是一個不錯的解決方案。謝謝 –

剛剛做了一個小測試，似乎this.dataMin總是返回0 ...這是非常傷心的... –

如果我正確理解你的問題，你想在最小值和最大值上畫兩條線。這應該很容易與Axis.addPlotLine。我會檢查最小/最大值的輸入數據，然後添加繪圖線。至於這個DEMO。

來源

2016-01-20 15:21:53 DrMacak

不是真的不，我正在尋找顯示最小和最大在軸上的值，沒有別的。 @jlbriggs的評論似乎是正確的答案 –

實際上，我可能需要稍後繪製這條線，這樣纔會有用，但現在它已經超出了範圍。無論如何感謝 –

帶有標籤的情節線基本上會模仿軸線（減去刻度線）。這是獲得你想要的各種潛在方法之一。 – jlbriggs

的tickPositions方法的示範：

首先，定義數據陣列和循環通過它找到你的min和max：

var chartData = [...], yMin, yMax; 

$.each(chartData, function(i,point) { 
    yMin = i == 0 ? point : (point < yMin ? point : yMin); 
    yMax = i == 0 ? point : (point > yMax ? point : yMax); 
});

然後，在你YAXIS屬性：

tickPositions: [Math.round(yMin), Math.round(yMax)],

例如：

http://jsfiddle.net/jlbriggs/9se1h970/

編輯

嗯，是的，當然評論。

可以固定蜱是所述絕對分鐘，並通過添加兩個更多的屬性到y軸的最大：

 min:0, 
     max: (yMax * 1.1), 
     startOnTick:false, 
     endOnTick:false,

更新例如：

http://jsfiddle.net/jlbriggs/9se1h970/1/

來源

2016-01-20 15:57:13 jlbriggs

我剛試過這個解決方案，它有一個惱人的副作用。對圖表顯示有明顯影響（除了明顯地顯示軸標記），這意味着它限制了數組中最低和最高項之間的視圖。不確定我可以使用那個，那麼找到一種不影響列的方法並且選擇你顯示的那個刻度將會很棒 –

現在我們正在談論！這是迄今爲止最好的選擇！ –

好的，這裏是我如何使用兩個答案：http://jsfiddle.net/9se1h970/2/ –

這裏是一個例子jsfiddle。

所有你需要做的，這只是：

定義您的最小值和最大值。
從源頭抓住你的數據（在這種情況下是一個JSON文件）
在一個新的數組（arrData）選擇y最小和y

保存它們之間的數據。

$（函數（）{

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
      var arrData=[]; 
     var i,Ymin,Ymax; 
    Ymin=20;//minmun value of Y data 
    Ymax=40;//max value of Y data 

    //selec only data between Ymin and Ymax 
    for(i=0;i<data.length;i++){ 
     if(data[i][1]> Ymin && data[i][1]<Ymax){ 
     arrData.push(data[i][1]); 
     }; 
    } 

    // Create the chart 
    $('#container').highcharts('StockChart', { 


     rangeSelector : { 
      selected : 1 
     }, 

     title : { 
      text : 'Min/Max Y data' 
     }, 

     series : [{ 
      name : 'Min Max Y', 
      data : arrData, 
     }] 
    }); 
});

}）;

來源

2016-01-21 12:40:31

只有最小和最大系列值的Highchart軸

回答

相關問題