Question

我使用高图表生成图表。根据我的要求，我想生成具有动态最小值和最大值的图表。即使我分配了最小值和最大值，我的图表也是从小于最小值开始的。我希望我的图形以用户定义的最小值开始，这样在轴和图形之间不应存在空白

$(document).ready(function() {
  var data1 = [{
    "maximumLean": 4.6,
    "usl": 5.5,
    "framesFlag": 0,
    "emptyConesFlag": 0,
    "ninetyFivePFlag": 0,
    "sigma3": 4.8,
    "sigma4": 4.4,
    "sigma1": 4.6,
    "arrow": 0,
    "inSpec": 100.0,
    "sigma2": 4.7,
    "recentLean2": 4.600084552015582,
    "recentLean1": 4.368252611538148,
    "recentLean4": 4.369438416014055,
    "recentLean3": 4.495304457897132,
    "check2Sigma": 1,
    "ninetyFivePValue": 0.1,
    "meanFlag": 0,
    "sigma6": 4.2,
    "sigma5": 4.3,
    "conesFlag": 0,
    "targetSpec": 4.5,
    "check3Sigma": 1,
    "cpm": 1.1,
    "emptyCone": 8.9,
    "ninetyPFlag": 0,
    "lsl": 3.5,
    "sampleSize": 30,
    "minimumLean": 4.4,
    "check1Sigma": -1,
    "ninetyPValue": 0.1,
    "sd": 0.1,
    "fpm": 1.0,
    "fc": 123,
    "lean": 4.4,
    "median": 4.4,
    "medianFlag": 0,
    "inspecFlag": 0,
    "cl": 4.5,
    "sdFlag": 0,
    "cc": 135
  }, {
    "lean": 4.5
  }, {
    "lean": 4.6
  }, {
    "lean": 4.4
  }, {
    "start": "08-12-2014  12:00:00",
    "end": "08-12-2014  14:00:00"
  }]

  $('#data').val(JSON.stringify(data1[0]));
  var x = 1;
  var inSpec = 0;
  var avgLean = 0;
  var mean = 0;
  var median = 0;
  var sd = 0;
  var maximum = 0;
  var minimum = 0;
  var sigma1 = 0;
  var sigma2 = 0;
  var sigma3 = 0;
  var sigma4 = 0;
  var sigma5 = 0;
  var sigma6 = 0;
  var avgLeanPercent = 0;
  var sampleSize = 0;
  //

  var meandataofHighChart = 0;
  var sigdata = [];
  var dataofHighChart = [];

  var maxChartVal = 0;
  var minChartVal = 0;

  for (var event in data1) {

    var dataCopy = data1[event];

    if (x == 1) {
      mean = dataCopy.cl;
      sd = dataCopy.sd;
      median = dataCopy.median;
      maximum = dataCopy.maximumLean;
      minimum = dataCopy.minimumLean;
      sigma1 = dataCopy.sigma1;
      sigma2 = dataCopy.sigma2;
      sigma3 = dataCopy.sigma3;
      sigma4 = dataCopy.sigma4;
      sigma5 = dataCopy.sigma5;
      sigma6 = dataCopy.sigma6;
      emptyCone = dataCopy.emptyCone;
      sampleSize = dataCopy.sampleSize != undefined ? dataCopy.sampleSize : 20;
      //alert(" Cone "+conesPerMinute.toFixed(1)+" Frame  "+dataCopy.fpm);
      sigdata.push(sigma6);
      sigdata.push(sigma5);
      sigdata.push(sigma4);
      sigdata.push(mean);
      sigdata.push(sigma1);
      sigdata.push(sigma2);
      sigdata.push(sigma3);
      //dataofHighChart.push(lean);
    }

    dataofHighChart.push(dataCopy.lean);
    meandataofHighChart = (mean);

    x++;
  }

  maxChartVal = maximum > sigma3 ? maximum : sigma3;
  minChartVal = minimum < sigma6 ? minimum : sigma6;
  console.info("sigdata    " + sigdata);
  console.info("maximum    " + maximum);
  console.info("sigma3    " + sigma3);
  console.info("minimum    " + minimum);
  console.info("sigma6    " + sigma6);
  console.info("maxChartVal    " + maxChartVal);
  console.info("minChartVal    " + minChartVal);

  minChartVal = minChartVal > 0 ? (minChartVal) - 0.1000000000000005 : 0;
  maxChartVal = maxChartVal > 0 ? (maxChartVal) + 0.1000000000000005 : 0;

  console.info("maxChartVal    " + maxChartVal);
  console.info("minChartVal    " + minChartVal);

  var highchart = new Highcharts.Chart({
    chart: {
      marginRight: 80,
      zoomType: "x",
      renderTo: 'chart_div', // like ,
      height: 350

    },
    title: {
      text: 'X-Bar Chart',
      style: {
        "font-weight": "bold",
        "font-size": "16px;"
      }
    },
    xAxis: {
      floor: 1,
      allowDecimals: false,
      title: {
        text: "Sample Number (N = " + sampleSize + ")",
        style: {
          "font-weight": "bold",
          "font-size": "14px;"
        }

      }

    },
    tooltip: {
      formatter: function() {
        return 'Sample Number : ' + this.point.x + '<br/> % Lean : ' + this.point.y + ' %';
      }
    },
    yAxis: [{
      lineWidth: 1,
      max: maxChartVal,
      min: minChartVal,
      floor: minChartVal,
      title: {
        text: '% Lean',
        style: {
          "font-weight": "bold",
          "font-size": "14px;"
        }
      },
      plotLines: [{
        value: meandataofHighChart,
        color: '#000000',
        width: 2,
        zIndex: 4
      }],

      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null,
      plotBands: [{
        from: minChartVal,
        to: sigdata[1],
        color: '#FF7F7F'
      }, {
        from: sigdata[1],
        to: sigdata[2],
        color: '#FFFF7F'

      }, {
        from: sigdata[2],
        to: sigdata[3],
        color: '#7FBF7F'
      }, {
        from: sigdata[3],
        to: sigdata[4],
        color: '#7FBF7F'

      }, {
        from: sigdata[4],
        to: sigdata[5],
        color: '#FFFF7F'

      }, {
        from: sigdata[5],
        to: maxChartVal,
        color: '#FF7F7F'
      }]
    }],
    series: [{
      name: '% Lean',
      data: dataofHighChart,
      color: '#00407F'
    }]

  });
});

Answer 1

默认情况下，yAxis的startOnTick选项和endOnTick选项为true。如果将它们设置为false，则highcharts将尊重您的最小/最大选项。

此处已更新fiddle。

yAxis: [{
    ...
    max:maxChartVal,
    min:minChartVal,
    startOnTick: false,
    endOnTick: false,
    ...

Highcharts y轴无法从给定值开始

1 个答案: