Настроить всплывающую подсказку в dxChart

Я делаю первые шаги с dxchart DevExtreme. На данный момент у меня есть код последующие:Настроить всплывающую подсказку в dxChart

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>DevExtreme Chart</title> 
     <!--FRAMEWOKR--> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
     <script src="./lib/globalize.min.js"></script> 
     <script src="./lib/dx.charts.js"></script> 
     <!--JS--> 
     <script type="text/javascript" src="chart.js"></script> 
    </head> 
    <body> 
     <div id="chartContainer" style="width:100%; height: 440px"></div> 
    </body> 
</html>

JS:

$(document).ready(function(){ 
    var dataSource = [ 
     { 
      argument: '15.06.2016', 
      puls: 102, 
      temperatur: 37.6, 
      weight: 91 
     }, 
     { 
      argument: '16.06.2016', 
      puls: 99, 
      temperatur: 35.1, 
      weight: 88 
     }, 
     { 
      argument: '17.06.2016', 
      puls: 87, 
      temperatur: 38.0, 
      weight: 87 
     }, 
     { 
      argument: '18.06.2016', 
      puls: 91, 
      temperatur: 36.3, 
      weight: 87 
     }, 
     { 
      argument: '19.06.2016', 
      puls: 112, 
      temperatur: 37.1, 
      weight: 90 
     } 
    ]; 

    $("#chartContainer").dxChart({ 
     dataSource: dataSource, 
     commonSeriesSettings: { 
      type: "spline", 
      label: { 
       visible: false, 
       connector: { 
        visible: false 
       } 
      }, 
      argumentField: "argument", 
      axis: "pulsAxe" 
     }, 
     tooltip: { 
      enabled: true, 
      customizeTooltip: function(obj) { 
       return { 
        text: obj.seriesName 
       } 
      } 
     }, 
     legend: { 
      verticalAlignment: "top", 
      horizontalAlignment: "right" 
      }, 
     "export": { 
      enabled: true 
     }, 
     title: { 
      text: "Hugo Amacher | 15.08.1977 (M)", 
      subtitle: { 
       enabled: true, 
       text: "Ich bin ein Untertitel..." 
      } 
     }, 
     zoomingMode: "all", 
     series: [ 
      { 
       name: "Puls", 
       valueField: "puls" 
      }, 
      { 
       name: "Temperatur", 
       valueField: "temperatur", 
       axis: "temperaturAxe" 
      }, 
      { 
       name: "Gewicht", 
       valueField: "weight", 
       axis: "weightAxe" 
      } 
     ], 
     valueAxis: [ 
      { 
       name: "pulsAxe", 
       title: "Puls", 
       position: "left", 
       label: { 
        customizeText: function(value) { 
         return value.value + " bpm" 
        } 
       } 
      }, 
      { 
       name: "temperaturAxe", 
       title: "Temperatur", 
       position: "left", 
       label: { 
        customizeText: function(value) { 
         return value.value + " °C" 
        } 
       } 
      }, 
      { 
       name: "weightAxe", 
       title: "Gewicht", 
       position: "left", 
       label: { 
        customizeText: function(value) { 
         return value.value + " kg" 
        } 
       } 
      } 
     ] 
    }); 
});

Мой результат:

Как вы можете видеть, имеется простая сплайн-диаграмма с тремя различными у-осями и тремя различными диапазонами значений для этих осей на графике. Для каждого топора у меня есть метка (bpm, ° C и kg). Я также внедрил всплывающую подсказку dxchart. В момент, когда я нахожу точку, в подсказке есть только значение. Я также хотел бы динамически добавить в подсказку ярлык после значения. Это означает, что когда я нахожу значение топора «Puls», он должен показать, например, это: 91 уд/мин. Как я могу это сделать. Я попробовал его с customizeTooltip: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/tooltip/?version=16_1#customizeTooltip

у меня была идея, чтобы проверить seriesName и назначить метку в обратном что-то вроде этого, но это не сработало:

tooltip: { 
    enabled: true, 
    customizeTooltip: function(point) { 
     if (point.seriesName == "Puls") { 
      return { 
       text: point.value + " bpm" 
      } 
     } else if (point.seriesName == "Gewicht") { 
      return { 
       text: point.value + " kg" 
      }      
     } else if (point.seriesName == "Temperatur") { 
      return { 
       text: point.value + " °C" 
      }       
     } 
    } 
},

источник

2016-06-24 MrBuggy

Привет, пожалуйста, проверьте Plunker https://plnkr.co/edit/6Uoh30bb8qBNWIIbyX0O?p=preview

проверить библиотеку включает

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script> 
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div id="chartContainer" style="width:100%; height: 440px"></div> 
    <!-- Put your html here! --> 
    </body> 

</html>

и JS

// Add your javascript here 
$(function(){ 
    var dataSource = [ 
     { 
      argument: '15.06.2016', 
      puls: 102, 
      temperatur: 37.6, 
      weight: 91 
     }, 
     { 
      argument: '16.06.2016', 
      puls: 99, 
      temperatur: 35.1, 
      weight: 88 
     }, 
     { 
      argument: '17.06.2016', 
      puls: 87, 
      temperatur: 38.0, 
      weight: 87 
     }, 
     { 
      argument: '18.06.2016', 
      puls: 91, 
      temperatur: 36.3, 
      weight: 87 
     }, 
     { 
      argument: '19.06.2016', 
      puls: 112, 
      temperatur: 37.1, 
      weight: 90 
     } 
    ]; 

    $("#chartContainer").dxChart({ 
     dataSource: dataSource, 
     commonSeriesSettings: { 
      type: "spline", 
      label: { 
       visible: false, 
       connector: { 
        visible: false 
       } 
      }, 
      argumentField: "argument", 
      axis: "pulsAxe" 
     }, 
     tooltip: { 
      enabled: true, 
      customizeTooltip: function(obj) { 
       console.log(obj.seriesName) 
       if (obj.seriesName == "Puls") { 
      return { 
       text: obj.value + " bpm" 
      } 
     } else if (obj.seriesName == "Gewicht") { 
      return { 
       text: obj.value + " kg" 
      }      
     } else if (obj.seriesName == "Temperatur") { 
      return { 
       text: obj.value + " °C" 
      }       
     } 

       // return { 
       //  text: obj.seriesName 
       // } 
      } 
     }, 
     legend: { 
      verticalAlignment: "top", 
      horizontalAlignment: "right" 
      }, 
     "export": { 
      enabled: true 
     }, 
     title: { 
      text: "Hugo Amacher | 15.08.1977 (M)", 
      subtitle: { 
       enabled: true, 
       text: "Ich bin ein Untertitel..." 
      } 
     }, 
     zoomingMode: "all", 
     series: [ 
      { 
       name: "Puls", 
       valueField: "puls" 
      }, 
      { 
       name: "Temperatur", 
       valueField: "temperatur", 
       axis: "temperaturAxe" 
      }, 
      { 
       name: "Gewicht", 
       valueField: "weight", 
       axis: "weightAxe" 
      } 
     ], 
     valueAxis: [ 
      { 
       name: "pulsAxe", 
       title: "Puls", 
       position: "left", 
       label: { 
        customizeText: function(value) { 
         return value.value + " bpm" 
        } 
       } 
      }, 
      { 
       name: "temperaturAxe", 
       title: "Temperatur", 
       position: "left", 
       label: { 
        customizeText: function(value) { 
         return value.value + " °C" 
        } 
       } 
      }, 
      { 
       name: "weightAxe", 
       title: "Gewicht", 
       position: "left", 
       label: { 
        customizeText: function(value) { 
         return value.value + " kg" 
        } 
       } 
      } 
     ] 
    }); 
});

источник

2016-06-24 07:04:05

Привет и спасибо за Ваш ответ, но это не работает ?! – MrBuggy

проверить снимок экрана, который я подключил –

Привет, ваш скрипт включает в себя мой экран белый и получить ошибку в консоли: GET https://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs. js net :: ERR_INSECURE_RESPONSE Cheers – MrBuggy

Настроить всплывающую подсказку в dxChart

ответ

Смежные вопросы