2016-06-24 7 views
0

私が持ってフォローチャート、WICH私はDevExtremeチャートで作られた:私は別の2を持っている接続ポイント(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軸(収縮期血圧および拡張期血圧)の2つの異なる範囲(sys = 140-170およびdia = 90-99)である。人間の血圧を測定するときは、収縮期の値を1つのスケールに、拡張期の値を1秒以内に配置する必要があります。これは2つの異なる値ですが、それらはまだ一緒です。そして、医療者はこのようなものの2つの値の間の垂直接続して、これを参照してくださいする必要があります。だから彼らは、血圧値を測定した十分に速く

enter image description here

を見ることができます一緒にいると、それぞれの値は何ですか。私たちにとっては、これはちょっと混乱しますが、医者、医者、ヘルスケアにとっては、それは単に論理的です。これは医療のチャートです。画像のように、2つのシリーズの2つの異なる点を互いに接続することは可能ですか?

ありがとうございます。

答えて

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

おかげ&乾杯を。

関連する問題