Question

我在尝试排序highstocks图表系列时遇到了问题。我继续得到Highcharts Error＃15。我理解为什么我会收到这个错误，但我正在寻找一种方法来解决它。我有一个3元素数组，如下[[x]，[y]，[time]]

我尝试使用股票图表来允许我在更新x和y散点图时滑过时间。要完全理解我正在为这种情节类型绘制一些推理可能会有所帮助。在这种情况下，x是发动机负荷百分比，而y是排气温度。

我得到了错误，因为无论我如何对数据进行排序，因为我有两个x系列，而highstock要求根据x轴对数据进行排序。你可以想象，x1和x2并没有相互依赖，而我有限的编程技巧让我在这里摸不着头脑。

我正在使用的代码的小提琴位于此处 - jsfiddle

非常感谢您的帮助！

Highcharts.stockChart('container', {

  xAxis: {

    labels: {
      enabled: false
    }
  },
  rangeSelector: {
buttons: [{
      type: 'day',
      count: 1,
      text: '1 Day'
    }, {
      type: 'day',
      count: 3,
      text: '3 Day'
    }, {
      type: 'day',
      count: 6,
      text: '6 Days'
    }, {
      type: 'ytd',
      text: 'YTD'
    }, {
      type: 'year',
      count: 1,
      text: '1y'
    }, {
      type: 'all',
      text: 'All'
    }]
  },
  chart: {
    type: 'scatter',
    reflow: false,

  },
  tooltip: {
    enabled: true,
  },
  boost: {
    useGPUTranslations: true,
    usePreAllocated: true
  },

  series: [{

      //groupPixelWdith: 100000,
      //turboThreshold: 10,
      id: 'main-series',
      data: points.map(function(point) {
        return [point[0], point[1], point[2], point[1]]
      }),
      showInNavigator: false,
      xAxis: 1,

      min: 0,
      keys: ['x', 'y', 'date', 'holdY'],
      labels: {
        enabled: false
      },
    }, {
      name: 'null_Lower',
      xAxis: 1,
      labels: {
        enabled: false
      },
      type: 'area',
      showInLegend: false,
      fillOpacity: .5,
      color: 'rgba(255,0,0,0.5)',
      data: [
        [0, 257],
        [10, 276],
        [20, 286],
        [30, 290],
        [40, 290],
        [50.0, 291],
        [60.0, 294],
        [70.0, 304],
        [80.0, 323],
        [90.0, 354]
      ]
    },

    {
      xAxis: 0,
      labels: {
        enabled: false
      },
      //min:0,
      //max: 1000,
      data: points.map(function(point) {
        return [point[2]]; //, point[1]];
      }),
      showInNavigator: true,
      enableMouseTracking: false,
      color: '#FF0000',
      showInLegend: false
    }

  ],

  yAxis: {
    title: {
      enabled: true,
      text: 'Exhaust Cylinder Temperature',
    },
    opposite: false,
    labels: {
      enabled: true
    },
    min: 100,
    max: 500
  },

  xAxis: [{

    //min: 0,
    //minRange: 1000 * 3600 * 24,
    type: 'linear',
    tickLength: 0,
    //tickLength: 0,
    labels: {
      enabled: false
    },
    events: {

      setExtremes: function(e) {

        var points = this.chart.get('main-series').points;
        points.forEach(function(point) {
          point.update({
              y: e.min <= point.date && point.date <= e.max ? point.holdY : 
null
            },
            false, false);
        });
        //this.chart.redraw;

      }
    }
  }, {
    type: 'linear'
  }],
  navigator: {
    enabled: true,
    xAxis: {
      //tickInterval: 0
    },

  }
});

Answer 1

我认为您应该创建两个单独的系列：

var seriesArr = [{
  data: []
}, {
  data: []
}];

// create new points and add them to their respective series
points.forEach(function(point) {
  seriesArr[0].data.push([point[2], point[0]]);
  seriesArr[1].data.push([point[2], point[1]]);
});

现场演示： http://jsfiddle.net/kkulig/qazkxary/

对于 points 数组中的每个元素，取第三项（timestamp）并将其作为两个点的x值。

这里解释了处理Highcharts中的数据：https://www.highcharts.com/docs/chart-concepts/series

您可能会发现它很有用。

使用多个系列分选散点图高品质图表

1 个答案: