2016-06-24 2 views
0

J'ai graphique de suivi, wich j'ai fait avec des cartes DevExtreme:Relier les points de deux séries différentes avec une ligne verticale (graphique 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>

J'ai deux différents axe y (tension artérielle systolique et diastolique) avec deux plages différentes (sys = 140-170 et dia = 90-99). Lorsque vous mesurez la pression artérielle d'un humain, vous devez placer la valeur systolique dans une échelle et la valeur diastolique dans une seconde. Ce sont deux valeurs différentes mais elles sont toujours ensemble. Et les personnes médicales doivent voir, avec une connexion verticale entre les deux valeurs quelque chose comme ceci:

enter image description here

Ils peuvent voir assez vite qui mesure les valeurs de pression artérielle sont ensemble et quelle est la valeur de chacun. Pour nous, utilisateurs «normaux», c'est un peu déroutant, mais pour les médecins, les médecins et les soins de santé, c'est tout simplement logique. Donc, ceci est un tableau pour les soins de santé. Est-il possible de relier deux points différents de deux séries les uns avec les autres comme dans l'image?

Merci et à bientôt.

Répondre

1

Cela a fonctionné pour moi:

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

J'ai utilisé le tableau de stock pour cette: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Series_Types/StockSeries/?search=stock&version=16_1&approach=Knockout

Merci & Acclamations.