只有最小和最大系列值的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轴

回答

相关问题