使用垂直线连接两个不同系列的点（DevExtreme图表）

Question

我有跟随图表，我用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）。当您测量人的血压时，您必须将收缩压值放在一个量表中，将舒张压值放在一秒钟内。这是两个不同的值，但它们仍在一起。医疗人员必须看到这一点，两个值之间的垂直连接是这样的：

因此，他们可以看到足够快的血压值，以及每个血压值的值。对于我们“正常”的用户来说，这有点令人困惑，但对于医疗人员，医生和医疗保健来说，这是合乎逻辑的。所以这是医疗保健的图表。是否可以像图片一样将两个系列中的两个不同点连接起来？

谢谢和欢呼。

Answer 1

这对我有用：

＆＃13;

＆＃13;

$(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"
        }
      }
    }]
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

谢谢＆amp;欢呼声。