2016-09-27 2 views
1

다음과 같은 데이터 세트가 있습니다.하이 차트의 툴팁에 배열의 배열 표시

var toolTip = [ ["IN001", "IN002"], "IN003", "IN004", ["IN005", "IN006", "IN007"] ]; 

이 툴팁을 사용하여 데이터를 표시하는 산점도가 있습니다.

{ 
     type: 'scatter', 
     name: 'incidents', 
     yAxis: 1, 
     data: [ [0,100],[1,100],[2,100],[3,100] ], 
     tooltip: { 
     pointFormatter: function(){ 
      return "Incident " + toolTip[this.series.data.indexOf(this)] ; 
     } 
     } 
    }, 

이제는이 데이터를 툴팁에 한 줄로 표시합니다. 툴팁에 둘 이상의 데이터가있는 경우 다음 줄을 원합니다.

IN0001 
IN0002 

대신 IN0001, IN0002 예를

하십시오.

다음 줄을 어떻게 얻을 수 있습니까? 이 경우이 데이터를 구문 분석하는 방법을 모르겠습니다.

나는 의심의 여지가 하나 더 있습니다. 각 이름은 하이퍼 링크 여야합니다. 툴팁의 모든 단어를 툴팁에 링크로 나타나게하려면 어떻게해야합니까?

도움을 주시면 감사하겠습니다.

다음은 작동 모델입니다. jsFiddle

+0

당신이 차트의 라이브 예제를 가지고 있습니까? –

+0

@ GrzegorzBlachliński http://jsfiddle.net/o2zmLngr/3/ –

+1

그래서이 차트와 비슷한 것을 얻고 싶습니까? http://jsfiddle.net/o2zmLngr/5/ 예가 귀하의 요구 사항을 충족 시키면 대답으로 게시 할 것입니다 –

답변

1

요구 사항을 충족 할 수 있도록 pointFormatter 함수를 변경할 수 있습니다. 'br'을 사용하여 줄 바꿈을 추가 할 수 있으며 일반 HTML에서와 같이 'a'를 사용하여 링크를 추가 할 수 있습니다. Highcharts.each()를 사용하여 배열을 반복하고 다음 요소를 문자열에 추가 할 수 있습니다. 여기

pointFormatter: function() { 
    var string = ''; 
    Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) { 
     string += '<a href = "">' + p + '</a><br>' 
    }) 
    return "Incident<br>" + string + "<br />"; 
} 

당신은 그것을 작동하는 방법을 예를 볼 수 있습니다 http://jsfiddle.net/o2zmLngr/5/

+0

링크가 활성화되지 않은 것 같습니다. 내가 href를주고 시도했지만, 언급 URL에 걸리지 않습니다. –

+0

css에서 포인터 이벤트를 auto로 설정해야합니다. http://jsfiddle.net/o2zmLngr/9/ –