kendoChart：有没有办法使用单个valueAxis显示多个不同的值标度系列？

1 回答

• 0

  我用于此问题的解决方案代码比我预期的要多 . 也许Telerik的其他产品都有这方面的API .

  本质上，我在kendoChart之外维护一个结构，用于存储每个系列的实际数据，并且这个实际数据被映射到当前可见valueAxis的预期比例 . 映射函数是从一个尺度到另一个尺度的标准变换 .

  valueAxis是'交换'，具体取决于单击的图例项，该事件触发图表上的重绘，其中所有系列数据都映射到“活动”轴 .

  一些代码片段 . 系列也被描述为一个 Channels .

  // The data structure.
  this._channelDescriptors.push({
      fullName: ch.fullName || "",
      axisTitle: (ch.fullName + axisEUString) || "",
      axisFont: ch.axisFont || "",
      axisColor: ch.color || "#000000",
      realData: [],
      minData: Number.MAX_VALUE,
      maxData: Number.MIN_VALUE
  });
  
  // This event causes the switching of valueAxis for all members of the series.
  $("#" + chartID).kendoChart({
      // Other kendoChart configurations
      //
      legendItemClick: function (e) {
          var idx = e.seriesIndex;
          sncTrender.updateAxis(idx);
          e.preventDefault();
      },
      tooltip: {
          visible: true,
          template: "#=series.name# : #=kendo.format('{0:N4}', dataItem.realValue)#
  #=kendo.format('{0:MM-dd HH:mm:ss.fff}', dataItem.Time)#",
      },
      //
      // Other kendoChart configurations
  });
  
  // All code snippets are members of a wrapper object.
  updateAxis: function (ch) {
      if (this.series[ch].visible) {
          this.setAxis(ch);
      }
  },
  
  // Every series is set to the same valueAxis via the selected series' valueAxis.name property.
  setAxis: function (ch) {
      var i,
          channel = this._channelDescriptors[ch];
      this._currentChannel = ch;
      for (i = 0; i < this.series.length; i++) {
          this.series[i].axis = this._channelDescriptors[ch].fullName;
      }
      // Set the active valueAxis properties. This is the only axis visible maintained for the chart.
      this.valueAxis.name = channel.fullName;
      this.valueAxis.title.text = channel.axisTitle;
      this.valueAxis.title.font = channel.axisFont;
      this.valueAxis.line.color = channel.axisColor;
  },
  
  // The mapping occurs here, and the transform calculation is this line
  //    Y: (yRange * (chDesc.realData[k].realValue - newMin) / newRange) + this.valueAxis.min,
  //
  updateChart: function (allTrends) {
      // ...
      timeStamps = trendDataResponse.curve.Timestamp;
      t1 = trendArgs.t1;
      t2 = trendArgs.t2;
      xValues = trendDataResponse.curve.X;
      yValues = trendDataResponse.curve.Y;
      pointCount = xValues.length;
      min = Number.MAX_VALUE;
      max = Number.MIN_VALUE;
      categoryTimes = [pointCount];
      newData = [];
      for (l = 0; l < pointCount; l++) {
          min = Math.min(min, yValues[l]);
          max = Math.max(max, yValues[l]);
          ts = new Date(timeStamps[l]);
          categoryTimes[l] = ts;
          // The Y data will be plotted on the chart, but the cursor tooltip will
          // use the realValue data. In this way, the series can be visible regardless of
          // the valueAxis scaling, but the actual data is also available. Refer to the
          // tooltip template.
          newData.push({ X: xValues[l], Y: yValues[l], realValue: yValues[l], Time: ts });
      }
  
      // Real data for each channel is stored in channelDescriptors.
      chDesc = this._channelDescriptors[channelID];
      chDesc.realData = newData;
      chDesc.minData = min;
      chDesc.maxData = max;
  
      // The valueAxis min/max is set only for the 'active' series.
      if (this._currentChannel === channelID) {
          this.categoryAxis.categories = categoryTimes;
          yRange = max - min;
          scaleAdjustment = yRange * SNC.CONST_yAxisScaleAdjustmentFactor;
          this.valueAxis.min = min - scaleAdjustment;
          this.valueAxis.max = max + scaleAdjustment;
      }
      }
      // Scale curves to current axis.
      // Use real data for the current series.
      for (j = 0; j < this.series.length; ++j) {
      chDesc = this._channelDescriptors[j];
      if (j === this._currentChannel) {
          this.series[j].data = chDesc.realData;
          continue;
      }
  
      // Use mapped data for all other series.
      recalcData = [];
      newMin = chDesc.minData;
      newMax = chDesc.maxData;
      newRange = newMax - newMin;
      rangeAdjustment = newRange * SNC.CONST_yAxisScaleAdjustmentFactor;
      newMin = newMin - rangeAdjustment;
      newMax = newMax + rangeAdjustment;
      for (k = 0; k < chDesc.realData.length; ++k) {
          recalcData.push({
              X: chDesc.realData[k].X,
              Y: (yRange * (chDesc.realData[k].realValue - newMin) / newRange) + this.valueAxis.min,
              realValue: chDesc.realData[k].realValue,
              Time: chDesc.realData[k].Time,
          });
      }
      this.series[j].data = recalcData;
      }
      chart.redraw();
  }
  

  回复于 2024-04-19T23:15:51+08:00