Flot을 사용하여 다른 웹 페이지로 이동하는 연결된 원형 차트를 어떻게 만들 수 있습니까?

StackOverflow https://stackoverflow.com/questions/1633728

  •  06-07-2019
  •  | 
  •  

문제

~ 안에 플로트, 각 웨지가 다른 웹페이지에 대한 링크인 원형 차트를 어떻게 만들 수 있나요?

도움이 되었습니까?

해결책

한번 해보았지만 할 수 없었습니다.나는 시작했다 이 예, 다음을 추가했습니다.

grid: { clickable: true },

"파이:{" 선.그런 다음 끝에 플롯클릭 기능을 추가했습니다.

$("#placeholder").bind("plotclick", function (event, pos, item) {
    alert('click!');
    for(var i in item){
        alert('my '+i+' = '+ item[i]);
    }
});

"클릭!"을 볼 수 있습니다. 메시지이지만 "항목"에는 속성이 없습니다.

저는 데이터 객체에 URL을 추가한 다음, 플롯클릭 기능 내에서 브라우저를 적절한 URL로 전달하기만 하면 된다고 생각했습니다.당신이 그것을 알아낸다면, 나는 알고 싶습니다!

업데이트: 다음은 작동할 수 있는 방법입니다. 레이블을 링크로 바꾸는 것입니다.다음과 같이 데이터에 URL을 입력하세요.

$.plot($("#placeholder"), [
    { label: "Serie1",  data: 10, url: "http://stackoverflow.com"},
    { label: "Serie2",  data: 30, url: "http://serverfault.com"},
    { label: "Serie3",  data: 90, url: "http://superuser.com"},
    { label: "Serie4",  data: 70, url: "http://www.google.com"},
    { label: "Serie5",  data: 80, url: "http://www.oprah.com"},
    { label: "Serie6",  data: 110, url: "http://www.realultimatepower.net/"}
],

그런 다음 labelFormatter를 다음과 같이 설정합니다.

return '<a href="'+serie.url+'">'+serie.label+'</a><br/>'+Math.round(serie.percent)+'%';

하지만 파이 웨지 자체를 클릭하는 것은 여전히 ​​특별한 일이 아닙니다.

다른 팁

나는 이것이 오래된 실이라는 것을 알고 있지만 이것을하는 또 다른 방법을 발견했습니다.

확실하게 하다 grid 설정되었습니다 clickable

var data = [{
  "label" : "series1",
  "data"  : 24,
  "url"   : "http://stackoverflow.com"
},
{
 // etc etc
}];

$.plot($('.chart'), data, function() {

      // Your options

      grid:  {
        clickable:true
      }

 });

클릭 함수를 요소에 바인딩하고 JavaScript를 사용하여 URL로 리디렉션하십시오.

$('.chart').bind("plotclick", function(event,pos,obj) {
  window.location.replace(data[obj.seriesIndex].url);
});

답변에 추가 데릭 커스...

플로트가 JSON에 포함하는 추가 객체를 무시하는 것처럼 보입니다. 예를 들어 내가 사용할 때 

data: [10, 0, "http://stackoverflow.com"] 
// 0 is used as an intercept value for y-axis

아무런 문제없이 작동했으며 이벤트 핸들러의 데이터에 액세스 할 수있었습니다.

$("#placeholder").bind("plotclick", function (event, pos, item) {
    alert(item.series.data);
});

나는이 플로트 라이브러리를 처음 접했고 JavaScript에서는 좋지 않습니다. 따라서 이것은 일을하는 올바른 방법은 아니지만 작동합니다. 나는 항상 HTML에 UI 요소에 추가 정보를 포함시키는 것을 항상 느꼈다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top