Syncfusion JS Chart 사용자 정의 툴팁

Syncfusion JS 12.1.0.43을 사용하여 사용자 정의 툴팁으로 꺾은 선형 차트를 구현하려고합니다.Syncfusion JS Chart 사용자 정의 툴팁

내 HTML은 다음과 같습니다.

<div id="div-overview-transaction-tooltip" style="display:none;"> 
    <div id="div-transaction-tooltip-value"> 
    <ul> 
    <li>#point.totalValue#</li> 
    <li>#point.dataSource.totalValue#</li> 
    <li>{{:totalValue}}</li> 
    <li>#series.dataSource.totalValue#</li> 
    </ul> 
    </div> 
</div>

다음은 JSON의 예입니다.

{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}

여기 내 JS가 있습니다.

$("#container").ejChart({ 
     primaryXAxis: { labelFormat: "HH:00" }, 
     primaryYAxis: 
     { 
     labelFormat: "{value}", 
     rangePadding: 'round', 
     range: { min: 0, max: 25, interval: 5 }, 
     }, 
     commonSeriesOptions: { 
     type: 'line', animation: true, 
     tooltip: { visible: true, template: 'div-overview-transaction-tooltip' }, 
     marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true }, 
     border: { width: 1 } 
     }, 
     series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }], 
     canResize: true, 
     load: "loadTheme", 
     size: { height: 300 }, 
     legend: { visible: true } 
    });

출력 :

  #point.TotalValue# 
      #point.dataSource.TotalValue# 
      {{:TotalValue}} 
      #series.dataSource.TotalValue#

내가 정의 툴팁에 JSON에서 내 재산을 모두 보여주고 싶어요. 툴팁을 제외한 모든 것이 잘 작동합니다.

도움이 될 것입니다. 이미 고마워.

출처

2014-06-06 burakakkor

기본적으로 툴팁 템플릿은 point.x와 point.y 만 지원하므로 툴팁 템플릿을 사용하여 직접 구현할 수는 없습니다.

그러나 JSON의 값 "TotalValue"는 아래 코드 스 니펫과 같이 다음 이벤트 "toolTipInitialize"를 사용하여 툴팁에 표시 될 수 있습니다.

$("#container").ejChart({ 
    primaryXAxis: { labelFormat: "HH:00" }, 
    primaryYAxis: 
    { 
    labelFormat: "{value}", 
    rangePadding: 'round', 
    range: { min: 0, max: 25, interval: 5 }, 
    }, 
    commonSeriesOptions: { 
    type: 'line', animation: true, 
    tooltip: { visible: true, template: 'div-overview-transaction-tooltip' }, 
    marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true }, 
    border: { width: 1 } 
    }, 
    series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }], 
    canResize: true, 
    load: "loadTheme", 
    size: { height: 300 }, 
    toolTipInitialize:"rendertool" 
    legend: { visible: true } 
});

그리고 방법에

는 "rendertool"

function rendertool(sender) { 

sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString(); 

}

이벤트의 송신자는 시리즈의 데이터 소스를 얻을 수있는 차트의 "모델"속성을 가지고 있으며, 따라서 당신은에 액세스 할 수 있습니다 JSON의 모든 값. 희망이 당신을 위해 작동합니다.

여기에 내가 이것을 시도한 샘플 링크가 있습니다.

Sample

감사

출처

2014-06-11 05:03:39

는이를 확인하는 시간을 가지고 매력처럼 작동합니다! 감사! :) – burakakkor

Syncfusion JS Chart 사용자 정의 툴팁

답변

관련 문제