首页 文章

Highchart Axis仅具有最小和最大系列值

提问于
浏览 次
0

在我们的应用程序的图表中，我们希望避免使用太多信息污染屏幕 .

我们需要一个只显示最低和最高值的轴 .

有人知道怎么用Highchart做到这一点？

那就是那样的

Chart as we want to see it

PS：忽略图表背后的垂直灰色条带，这是完全不相关的 .

javascript highcharts

4 回答

  • 3

    您还可以使用tickPositioner从数据中提取min / max并返回两个值的数组 .

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

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

    回复于
  • 1

    tickPositions方法的演示：

    首先，定义您的数据数组并循环遍历它以找到您的最小值和最大值：

    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)],

    例：

    EDIT for comment

    啊，是的，当然 .

    您可以通过向y轴添加更多属性来固定作为绝对最小值和最大值的刻度：

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

    更新示例：

    回复于
  • 0

    这是一个例子jsfiddle .

    所有你需要做的只是：

    • 定义你的最小值和最大值 .

    • 从您的源中获取数据（在本例中是一个Json文件）

    • 仅选择Ymin和Ymax之间的数据

    • 将它们保存在新数组（arrData）中 .

    $（function（）{

    $.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,
        }]
    });
});

    }）;

    回复于
  • 1

    如果我正确理解了您的问题，您希望在最小值和最大值上绘制两条线 . 使用 Axis.addPlotLine 可以轻松实现 . 我会检查输入数据的最小值/最大值，然后添加绘图线 . 就像这个DEMO .

    回复于

相关问题