подсказка amchart исчезла, когда я начал использовать длительность на xAxes - PullRequest
Новая
       8

подсказка amchart исчезла, когда я начал использовать длительность на xAxes

0 голосов
/ 08 февраля 2019

Уважаемые пользователи переполнения стека.

Я бы хотел работать с amchart V4.Мне нужна линейная диаграмма, где у меня есть длительность по xAxes и значение по yAxis.

Когда я использую свой код, оси X и Y имеют всплывающую подсказку с текущей позицией мыши, но в серии не отображается подсказка.Эта подсказка должна содержать значение в точке, в которой находится мышь.

Мне бы хотелось всплывающую подсказку, похожую на маленькую синюю на прикрепленном изображении.

Вы можете увидеть синюю подсказку на этом скриншоте, что я хочу на своем графике.

Но этого не стало, когда я начал использовать длительность на xAxis. 

am4core.useTheme(am4themes_animated);

$('document').ready(function(){
  createChart()
});

function createChart(){
  var i=0
  var time=10;
  var step=10;
  var data = [];
  var last = 50;
  for (i = 0; i < 3200; i++) { 
  last = last+(50-Math.random()*100);
    data.push({
      date: time,
      value: last
    });
    time = time + step;
    i=i+1;
  };

  var chart = am4core.createFromConfig({
    // Set settings and data
    "paddingRight": 20,
    "data": data,
  
    // Create X axes
    "xAxes": [{
      "type": "DurationAxis",
      "renderer": {
        "grid": {
          "location": 0
        },
        "labels":{
            "rotation": 45,
            "verticalCenter": "middle",
            "horizontalCenter": "left"
        }
      },
      "baseUnit": "millisecond",
      "durationFormatter": {
        "durationFormat": " mm ':' ss '.' SS ",
      },
      "minPeriod":"SS",
      "title":{
        "text": "Idő (mm:ss.SS)"
      }
    }],
  
    // Create Y axes
    "yAxes": [{
        "type": "ValueAxis",
        "tooltip": {
            "disabled": false
      },
      "renderer": {
        "minWidth": 5
      },
      "title":{
        "text": "Payload érték (mmHg)"
      }
    }],
  
    // Create series
    
    "series": [{
        "id": "s1",
        "type": "LineSeries",
        "dataFields": {
            "valueX": "date",
            "valueY": "value"
        },
        "strokeWidth": "2" ,
 
        "tooltipText": "{valueY.value}",
        "fillOpacity": "0.3",
        "tooltip":{
            "background":{
                "cornerRadius": "20",
                "fillOpacity ": "0.5"
            }, 
            "lable":{
                "padding": "12"
            }
        }
    }],
    
   // Create series
   "series": [{
    "id": "s1",
    "type": "LineSeries",
    "dataFields": {
      "valueX": "date",
      "valueY": "value"
    },
   
    "tooltipText": "{value}"

  }],
  
    // Add cursor
    "cursor": {
        "behavior ": "panXY"
    },
  
    // Add horizontal scrollbar
    "scrollbarX": {
      "type": "XYChartScrollbar",
      "series": ["s1"],
    },


    // Create vertical scrollbar and place it before the value axis
    "scrollbarY":{
      "scrollbarY": "Scrollbar",
      "parent": "leftAxesContainer"
    }


  }, "chartdiv", "XYChart");
  return chart;
  }
  
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #ffffff;
  overflow: hidden;
  margin: 0;
}

#chartdiv {
  width: 100%;
  max-height: 500px;
  height: 100vh;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>amCharts V4 Example - simple-line-chart</title>
    <link rel="stylesheet" href="index.css" />
    <script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="chartdiv"></div>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
  </body>
</html>
...