2016-07-15 3 views
0

차트에서 4 개의 시리즈를 플로팅하기 위해 하이 스탁 차트를 사용합니다. 주된 것은 촛대입니다. 그런 다음 2 개의 시리즈가 priceplus, 가격보다 낮은 가격을 표시하고 다른 하나는 볼륨을 나타냅니다. .캔들 스틱을 그대로 두는 툴팁 사용자 정의

enter image description here

나는이 수정되지 싶어 (이 스크린 샷에서 볼 수 있듯이) 나는 pricelower/priceplus의 툴팁부터 문제가 생겼어요은 유닉스 날짜 등이 아닌 인간의 redeable 형태로 시간을 보여줍니다

enter image description here

내가 어떻게 할 수 있습니까? 감사

여기에 내 JS 코드

function onSuccess(data) { 
    var r = JSON.stringify(data); 
    debugger; 
    kendo.ui.progress($('#container'), false); 
    $('#container') 
     .highcharts('StockChart', 
     { 
      exporting: { 
       enabled: false 
      }, 
      credits: 
      { 
       enabled: false 
      }, 
      rangeSelector: { 
       selected: 1, 
       inputEnabled:false, 
       buttonTheme: { 
        visibility: 'hidden' 
       }, 
       labelStyle: { 
        visibility: 'hidden' 
       } 
      }, 
      yAxis: [ 
       { 
        height: '80%', 
        lineWidth: 2 
       }, { 
        top: '85%', 
        height: '15%', 
        offset: 0, 
        lineWidth: 2 
       } 
      ], 
      xAxis: 
      { 
       ordinal: true 
      } 
     , 
      series: [ 
       { 
        type: 'candlestick', 
        name: 'Price', 
        data: data.Prices, 
        id: 'dataseries', 
        upColor: "#31D431", 
        color: "#D22F2F", 
        marker:{ 
         enabled: true 
        } 
       }, 
       { 
        type: 'scatter', 
        name: 'Prices plus', 
        data: data.PricesPlus 

       }, 

      { 
       type: 'scatter', 
       name: 'Price less', 
       data: data.PricesLess 

      } 
       , { 
        type: 'column', 
        name: 'Volume', 
        data: data.Volume, 
        yAxis: 1, 
        dataGrouping: { 
         units: groupingUnits 
        } 
       } 
      ], 
      width: 4, 
      tooltip: { 
     shared: false 

} 

     }); 
} 

답변

2

당신은 tooltip.formatter을 사용하고 팝업의 내용을 작성해야합니다. 각 값은 점 참조에서 추출 할 수 있습니다.

tooltip:{ 
    formatter: function() { 
     var points = this.point ? Highcharts.splat(this.point) : this.points, 
      point = points[0], 
      each = Highcharts.each, 
      txt = ''; 

     txt += '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b, %H:%M', point.x) + '</span><br/>'; 

     each(points, function(p, i) { 

     if(p.point && p.point.open) { 
      txt += '<span style="color:' + p.color + '">\u25CF</span><b> ' + p.series.name + '</b>:<br/>Open: ' + p.point.open + '<br/>High: ' + p.point.high + '<br/>Low: ' + p.point.low + '<br/>Close: ' + p.point.close + '<br/>'; 
     } else { 
      txt += '<span style="color:' + p.color + '">\u25CF</span> ' + p.series.name + ': <b>' + p.y + '</b><br/>'; 
     } 
     }); 

     return txt; 
    } 
    }, 

예 : - http://jsfiddle.net/abpbyx8z/

+0

하는 것은 실례합니다, 나는이 컬렉션에 마커 시리즈를 추가했지만 그것은 나에게 텍스트를 표시하지 않습니다, 내가 이것을 hadle 어떻게 ... 정의되지 않은 말한다 포매터? – advapi

+0

시리즈를 추가 했습니까? 내 jsfiddle을 코드로 업데이트 할 수 있습니까? –

관련 문제