하이 차트를 사용하여 연속 표시 값을 변경하는 방법이 있습니까?

Sebastian_Svensson

저는 stackoverflow, django 및 highcharts를 처음 사용하므로 불편을 끼쳐 드려 죄송합니다.

그래서 저는 현재 작은 문제를 발견했을 때 하이 차트에 시간과 날짜를 표시하는 작업을하고 있습니다. 차트를 보면 모든 것이 다음과 같이 잘 보입니다.

https://i.stack.imgur.com/6hALh.png

그러나 차트의 한 지점에 마우스를 가져 가면 다른 값이 표시됩니다. 이렇게 생겼어요https://i.stack.imgur.com/WUr2p.png

한 지점에 초점을 맞출 때 총 마이크로 초가 아니라 측면 에서처럼 HH : MM : SS로 표시되도록하고 싶습니다. 그렇게하려면 무엇을 변경해야합니까?

다음은 차트의 코드입니다.

    <script>
                                $(function () {
                                $('#container').highcharts({
                                    chart:
                                    {
                                        type: 'line'
                                    },
                                    title:
                                    {
                                        text: 'Time worked by {{user_to_show}}'
                                    },
                                    xAxis:
                                    {
                                        categories: {{dates|safe}}
                                    },
                                    yAxis:
                                    [{
                                        title:
                                        {
                                            text: ''
                                        },
                                        gridLineWidth: 1,
                                        type: 'datetime', //y-axis will be in milliseconds
                                        dateTimeLabelFormats:
                                        { //force all formats to be hour:minute:second
                                                second: '%H:%M:%S',
                                                minute: '%H:%M:%S',
                                                hour: '%H:%M:%S',
                                                day: '%H:%M:%S',
                                                week: '%H:%M:%S',
                                                month: '%H:%M:%S',
                                                year: '%H:%M:%S'
                                        },
                                        opposite: true
                                    }],
                                    plotOptions:
                                    {
                                        series:
                                        {
                                            dataLabels:
                                            {
                                                enabled: true,
                                                formatter: function()
                                                {
                                                    if( this.series.index == 0 )
                                                    {
                                                        return secondsTimeSpanToHMS(this.y/1000) ;
                                                    }
                                                    else
                                                    {
                                                        return this.y;
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    series:
                                    [{
                                        name: 'Time',
                                        yAxis: 0,
                                        data: {{time|safe}}
                                    }]
                                });
                            });

                        function secondsTimeSpanToHMS(s) {
                            var h = Math.floor(s / 3600); //Get whole hours
                            s -= h * 3600;
                            var m = Math.floor(s / 60); //Get remaining minutes
                            s -= m * 60;
                            return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds
                        }
 </script>

더 많은 코드, 데이터 또는 정보를 원하시면 저에게 알려주십시오. 답장을 보내 주신 분들께 미리 감사드립니다.

Sebastian_Svensson

내 문제에 대한 해결책을 찾을 수있었습니다. 추가해야했다 :

tooltip:
                                {
                                        formatter: function ()
                                        {
                                            var text = this.x + ': ' + secondsTimeSpanToHMS(this.y/1000);
                                            return text;
                                        }
                                },

결과는 다음과 같습니다. 여기에 이미지 설명 입력

(이 게시물을 답변으로 표시하지만 stackoverflow는 2 일까지 할 수 없습니다)

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Microsoft 터미널 서비스 클라이언트를 사용하여 연결 표시 줄을 "더 어렵게"표시 할 수있는 방법이 있습니까?

분류에서Dev

postsharp를 사용하여 런타임에서 속성을 변경하는 방법이 있습니까?

분류에서Dev

앵커 태그를 사용하여 CSS 표시 속성을 변경하는 방법은 무엇입니까?

분류에서Dev

siddhi를 사용하여 이벤트의 연속 값에서 값을 어떻게 선택할 수 있습니까?

분류에서Dev

LINQ를 사용하여 동시에 두 속성을 orderBy하는 방법이 있습니까?

분류에서Dev

내 모델의 표시 이름 속성을 읽기 위해 자리 표시자를 변경하는 방법이 있습니까?

분류에서Dev

Altair-viz : 패싯 차트가 표시되는 순서를 변경하는 방법이 있습니까?

분류에서Dev

DateTime을 사용하여 +/- 차이를 표시하는 방법

분류에서Dev

slickgrid가 그룹화 된 행을 표시하는 순서를 변경하는 방법이 있습니까? (Asc, Desc)

분류에서Dev

charts_flutter를 사용하여 값 스트림이있는 실시간 차트를 그릴 수 있습니까?

분류에서Dev

jQuery를 사용하여 지연이있는 CSS 속성 변경

분류에서Dev

jQuery를 사용하여 지연이있는 CSS 속성 변경

분류에서Dev

LINQ 문을 다시 사용할 수 있지만 해당 속성에서 호출되는 속성과 메서드를 변경하는 방법이 있습니까?

분류에서Dev

약한 자아를 사용하지 않을 때 경고를 표시하는 방법이 있습니까?

분류에서Dev

사용자 정의 클래스에 대해 toString 메소드가 표시하는 속성을 동적으로 변경하는 방법이 있습니까?

분류에서Dev

부트 스트랩을 사용하고있는 경우 3 개의 이미지를 연속으로 표시하려면 어떻게해야합니까?

분류에서Dev

ActiveRecord 속성 해시 값을 업데이트하는 더 관용적 인 방법이 있습니까?

분류에서Dev

변수를 사용하여 버튼의 표시 이름을 변경할 수 있습니까?

분류에서Dev

kendoChart : 단일 valueAxis를 사용하여 여러 일련의 서로 다른 값 스케일을 표시하는 방법이 있습니까?

분류에서Dev

woocommerce 장바구니를 PHP로 표시하지만 아이콘을 추가하고 텍스트를 변경하여 사용자 정의하는 방법

분류에서Dev

값이 반복되는 경우 목록의 열에 값을 표시하는 방법은 mysql 및 codeigniter를 사용하여 한 번만 표시합니까?

분류에서Dev

녹아웃을 사용하여 데이터 테이블에서 변경된 요소를 강조 표시 / 표시하는 방법은 무엇입니까?

분류에서Dev

ssh를 사용하여 연결할 때 시작 페이지를 변경하는 방법은 무엇입니까?

분류에서Dev

typescript를 사용하여 종속성 주입을 사용하는 방법이 있습니까?

분류에서Dev

Entity Framework 및 MVC를 사용하여 탐색 속성 값을 표시하는 방법은 무엇입니까?

분류에서Dev

변경 사항을 적용하기 위해 봇을 다시 시작하지 않고 명령 접두사를 변경하는 방법이 있습니까? (DSharpPlus)

분류에서Dev

JS 또는 JQuery를 사용하여 연결 한 후 입력 된 값없이 입력을 표시하지 않는 방법은 무엇입니까?

분류에서Dev

c3 js를 사용하여 확대 할 때 더 많은 x 축 값을 표시하는 방법이 있습니까?

분류에서Dev

이름 서버를 사용하여 내 도메인을 heroku와 연결하는 방법이 있습니까?

Related 관련 기사

  1. 1

    Microsoft 터미널 서비스 클라이언트를 사용하여 연결 표시 줄을 "더 어렵게"표시 할 수있는 방법이 있습니까?

  2. 2

    postsharp를 사용하여 런타임에서 속성을 변경하는 방법이 있습니까?

  3. 3

    앵커 태그를 사용하여 CSS 표시 속성을 변경하는 방법은 무엇입니까?

  4. 4

    siddhi를 사용하여 이벤트의 연속 값에서 값을 어떻게 선택할 수 있습니까?

  5. 5

    LINQ를 사용하여 동시에 두 속성을 orderBy하는 방법이 있습니까?

  6. 6

    내 모델의 표시 이름 속성을 읽기 위해 자리 표시자를 변경하는 방법이 있습니까?

  7. 7

    Altair-viz : 패싯 차트가 표시되는 순서를 변경하는 방법이 있습니까?

  8. 8

    DateTime을 사용하여 +/- 차이를 표시하는 방법

  9. 9

    slickgrid가 그룹화 된 행을 표시하는 순서를 변경하는 방법이 있습니까? (Asc, Desc)

  10. 10

    charts_flutter를 사용하여 값 스트림이있는 실시간 차트를 그릴 수 있습니까?

  11. 11

    jQuery를 사용하여 지연이있는 CSS 속성 변경

  12. 12

    jQuery를 사용하여 지연이있는 CSS 속성 변경

  13. 13

    LINQ 문을 다시 사용할 수 있지만 해당 속성에서 호출되는 속성과 메서드를 변경하는 방법이 있습니까?

  14. 14

    약한 자아를 사용하지 않을 때 경고를 표시하는 방법이 있습니까?

  15. 15

    사용자 정의 클래스에 대해 toString 메소드가 표시하는 속성을 동적으로 변경하는 방법이 있습니까?

  16. 16

    부트 스트랩을 사용하고있는 경우 3 개의 이미지를 연속으로 표시하려면 어떻게해야합니까?

  17. 17

    ActiveRecord 속성 해시 값을 업데이트하는 더 관용적 인 방법이 있습니까?

  18. 18

    변수를 사용하여 버튼의 표시 이름을 변경할 수 있습니까?

  19. 19

    kendoChart : 단일 valueAxis를 사용하여 여러 일련의 서로 다른 값 스케일을 표시하는 방법이 있습니까?

  20. 20

    woocommerce 장바구니를 PHP로 표시하지만 아이콘을 추가하고 텍스트를 변경하여 사용자 정의하는 방법

  21. 21

    값이 반복되는 경우 목록의 열에 값을 표시하는 방법은 mysql 및 codeigniter를 사용하여 한 번만 표시합니까?

  22. 22

    녹아웃을 사용하여 데이터 테이블에서 변경된 요소를 강조 표시 / 표시하는 방법은 무엇입니까?

  23. 23

    ssh를 사용하여 연결할 때 시작 페이지를 변경하는 방법은 무엇입니까?

  24. 24

    typescript를 사용하여 종속성 주입을 사용하는 방법이 있습니까?

  25. 25

    Entity Framework 및 MVC를 사용하여 탐색 속성 값을 표시하는 방법은 무엇입니까?

  26. 26

    변경 사항을 적용하기 위해 봇을 다시 시작하지 않고 명령 접두사를 변경하는 방법이 있습니까? (DSharpPlus)

  27. 27

    JS 또는 JQuery를 사용하여 연결 한 후 입력 된 값없이 입력을 표시하지 않는 방법은 무엇입니까?

  28. 28

    c3 js를 사용하여 확대 할 때 더 많은 x 축 값을 표시하는 방법이 있습니까?

  29. 29

    이름 서버를 사용하여 내 도메인을 heroku와 연결하는 방법이 있습니까?

뜨겁다태그

보관