2016-06-24 9 views
0

Я получил последующий график, которым я сделал с DevExtreme диаграмм:Connect точки из двух различных серий с вертикальной линией (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). Когда вы измеряете кровяное давление человека, вы должны поместить систолическое значение в один масштаб и диастолическое значение за секунду. Это два разных значения, но они все еще вместе. И медицинские люди должны это увидеть, с вертикальной связи между двумя значениями что-то вроде этого:

enter image description here

Таким образом, они могут видеть достаточно быстро, которые измеряются значения артериального давления вместе и какова ценность каждого из них. Для нас «нормальных» пользователей это немного запутывает, но для медицинских работников, врачей и здравоохранения это просто логично. Так что это диаграмма для здравоохранения. Можно ли соединить две разные точки двух серий друг с другом, как на картинке?

Спасибо и привет.

ответ

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

Благодарности & веселит.