Dygraphs 如何为一个轴实现两个标签

Question

我有一个包含一个数据系列的 Dygraphs 图。特殊之处在于我想为这个系列实现两个 y 标签。左侧 y 轴的百分比和右侧 y 轴的值。

我尝试实现两个数据系列（一个用于百分比，一个用于值）。但是我想不出如何避免第二个系列的绘图。

这是我目前的选择：

this.options = {
  width: 700, height: 300, labels: ['Time', 'Y1', 'Y2'],
  ylabel: 'Coupled Power [%]',
  y2label: 'Signal Value [µW]',
  series: {
    'Y1': {axis: 'y1'},
    'Y2': {axis: 'y2'}
    },
};

这是我期望的示例：

我的问题是如何避免绘制 Y2 系列，或者如果不能，我如何为一个数据系列设置两个 y 标签？

Answer 1

图表的标签绝对放置在图表的 div 内。该图绘制在 canvas.

上

使用 jQuery 或普通 javascript DOM 查询使用以下 class

查找子 div

<div class="dygraph-axis-label dygraph-axis-label-y">000</div>

获取父级并确定文本是否左对齐：text-align: left; 或者 left 位置是否 > 宽度*0.5。

<div style="position: absolute; font-size: 14px; width: 50px; top: 242.259px; left: 500px; text-align: left;">
    <div class="dygraph-axis-label dygraph-axis-label-y">000</div>
</div>

保留这些父 div 的列表以及何时收集所有。从 DOM 中删除它们。也许你可以直接删除它，但这是安全的方法。

Answer 2

如果要删除整个次要 y 轴（标签和刻度），可以使用 drawAxis 选项：

const options = {
  width: 700, height: 300, labels: ['Time', 'Y1', 'Y2'],
  ylabel: 'Coupled Power [%]',
  // y2label: 'Signal Value [µW]',
  series: {
    'Y1': {axis: 'y1'},
    'Y2': {axis: 'y2'}
  },
  axes: {
    y2: {
      drawAxis: false  // <---
    }
  }
};

如果只是想隐藏标签，可以不设置y2label，也可以使用CSS隐藏。

Answer 3

好的，我自己找到了解决方案。因此，就像在示例中一样，我添加了两个数据系列：

左边的斧子叫 Y1，其中包含我的百分比
另一个叫Y2的右斧头，里面有我对应的值

然后我不得不避免绘制 Y2（Y1 和 Y2 重叠并导致性能问题）。

为此，我将 Y2 的 strokeWidth 设置为 0，并使用 "drawHighlightPointCallback" 禁用了 Y2 点突出显示。

这是我的决赛选项：

this.options = {
  width: 700, height: 300, labels: ['Time', 'Y1', 'Y2'],
  ylabel: 'Coupled Power [%]',
  y2label: 'Signal Value [µW]',
  series: {
    'Y1': {
      axis: 'y1'
    },
    'Y2': {
      axis: 'y2',
      strokeWidth: 0,
      pointSize: 0,
      drawHighlightPointCallback: function (g, seriesName, canvasContext, cx, cy, color, pointSize) {
        return;
      }
    }
  }

希望对您有所帮助！

Dygraphs 如何为一个轴实现两个标签

Dygraphs how to implement two labels for one axis

javascript

dygraphs