用一条垂直线连接来自两个不同系列的点（DevExtreme 图表）答案

【问题标题】：Connect points from two different series with an vertical line (DevExtreme chart)用一条垂直线连接来自两个不同系列的点（DevExtreme 图表）
【发布时间】：2016-06-24 12:03:02
【问题描述】：

我有跟随图表，我用 DevExtreme 图表制作的：

// Add your javascript here
$(function() {
  var dataSource = [{
    argument: '15.06.2016',
    sys: 160,
    dia: 90
  }, {
    argument: '16.06.2016',
    sys: 170,
    dia: 95
  }, {
    argument: '17.06.2016',
    sys: 152,
    dia: 91
  }];

  $("#chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
      label: {
        visible: false,
        connector: {
          visible: false
        }
      },
      argumentField: "argument",
    },
    tooltip: {
      enabled: true,
      customizeTooltip: function(obj) {
        return {
          text: obj.value + " mmHg"
        }
      }
    },
    legend: {
      verticalAlignment: "top",
      horizontalAlignment: "right"
    },
    title: {
      text: "Hugo Amacher | 15.08.1977 (M)",
      subtitle: {
        enabled: true,
        text: "Ich bin ein Untertitel..."
      }
    },
    export: {
      enabled: true,
      printingEnabled: true
    },
    zoomingMode: "all",
    scrollingMode: "all",
    series: [{
      name: "Blutdruck systolisch",
      type: "scatter",
      valueField: "sys",
      axis: "sysAxe",
      point: {
        color: "black",
        symbol: "triangleDown"
      }
    }, {
      name: "Blutdruck diastolisch",
      type: "scatter",
      valueField: "dia",
      axis: "diaAxe",
      point: {
        color: "black",
        symbol: "triangleUp"
      }
    }],
    valueAxis: [{
      name: "sysAxe",
      title: "Blutdruck systolisch",
      position: "left",
      max: 170,
      min: 140,
      label: {
        customizeText: function(value) {
          return value.value + " mmHg"
        }
      }
    }, {
      name: "diaAxe",
      title: "Blutdruck diastolisch",
      position: "left",
      max: 99,
      min: 90,
      label: {
        customizeText: function(value) {
          return value.value + " mmHg"
        }
      }
    }]
  });
});

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>

<div id="chartContainer" style="width:100%; height: 440px"></div>

我有两个不同的 y 轴（收缩压和舒张压），有两个不同的范围（sys= 140-170 和 dia= 90-99）。当您测量人的血压时，您必须将收缩压值放在一个刻度上，将舒张压值放在第二个刻度上。这是两个不同的值，但它们仍然在一起。医务人员必须看到这一点，这两个值之间的垂直联系如下：

所以他们可以足够快地看到哪些测量的血压值是在一起的，每个值是什么。对于我们“普通”用户来说，这有点令人困惑，但对于医务人员、医生和医疗保健人员来说，这简直是合乎逻辑的。所以这是一个医疗保健图表。是否可以像图中那样将两个系列的两个不同点相互连接？

感谢和欢呼。

【问题讨论】：

标签： charts devexpress points devextreme

【解决方案1】：

这对我有用：

$(function() {
  var dataSource = [{
    argument: '15.06.2016',
    sys: 160,
    dia: 90
  }, {
    argument: '16.06.2016',
    sys: 170,
    dia: 95
  }, {
    argument: '17.06.2016',
    sys: 152,
    dia: 91
  }];

  $(".chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
      label: {
        visible: false,
        connector: {
          visible: false
        }
      },
      argumentField: "argument",

    },
    tooltip: {
      enabled: true,
      customizeTooltip: function(obj) {
        return {
          text: obj.highValueText + "/" + obj.lowValueText + " mmHg"
        }
      }
    },
    legend: {
      visible: false,
      verticalAlignment: "top",
      horizontalAlignment: "right"
    },
    title: {
      text: "Hugo Amacher | 15.08.1977 (M)",
      subtitle: {
        enabled: true,
        text: "Ich bin ein Untertitel..."
      }
    },
    zoomingMode: "all",
    scrollingMode: "all",
    series: [{
      type: "stock",
      lowValueField: "dia",
      closeValueField: "dia",
      openValueField: "sys",
      highValueField: "sys",
    }],
    valueAxis: [{
      name: "bdAxe",
      title: "Blutdruck",
      position: "left",
      label: {
        customizeText: function(value) {
          return value.value + " mmHg"
        }
      }
    }]
  });
});

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>

<div class="chartContainer" style="width:100%; height: 440px"></div>

我为此使用了股票图表：http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Series_Types/StockSeries/?search=stock&version=16_1&approach=Knockout

谢谢和干杯。

【讨论】：