flot.js 및 데이터 소스를 외부 json 파일로 사용하는 깔때기 형 차트 표시

외부 json 파일을 입력으로 사용하지만 json이 가져 왔지만 flot.js 라이브러리를 사용하여 깔때기 형 차트를 플로트하려합니다. 데이터 소스와 차트가 플롯되지 않습니다. 사람은 내가 JSON 파일 SAMPLE.JSON에게flot.js 및 데이터 소스를 외부 json 파일로 사용하는 깔때기 형 차트 표시

[ 
    { 
    "data": 10, 
    "label": "a" 
    }, 
    { 
    "data": 81, 
    "label": "b" 
    }, 
    { 
    "data": 20, 
    "label": "c" 
    }, 
    { 
    "data": 90, 
    "label": "d" 
    } 
]

을 가지고 있지만 folt.js 라이브러리

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Flot Examples: Funnel Charts</title> 
    <link href="css/examples.css" rel="stylesheet" type="text/css"> 

    <script language="javascript" type="text/javascript" src="js/jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="js/jquery.flot.funnel.js"></script> 
    <script type="text/javascript"> 

    $(function() { 
     var data; 
     $.getJSON("sample.json", function(json) { 
     data=json; 
     console.log(data); 
     }); 

     var placeholder = $("#placeholder"); 
      $.plot('#placeholder', data, { 
       series:{ 
       funnel: { 
         show: true, 
        stem: { 
         height: 0.2, 
         width: 0.4 
        }, 
        margin: { 
         //right: 0.15 
        }, 
        label:{ 
         show: true, 
         align: "center", 
         threshold: 0.05, 
         formatter: labelFormatter 
        }, 
        highlight: { 
         opacity: 0.2 
        } 
       }, 
      }, 
      grid: { 
       hoverable: true, 
       clickable: true 
      } 
     }); 

     placeholder.bind("plotclick", function(event, pos, obj) { 
      if (!obj) { 
       return; 
      } 
      alert(obj.series.label + ": " + obj.series.value); 
     }); 

     function labelFormatter(label, series) { 
      return "<div style='font-size:11pt; text-align:center; padding:2px; color:#fff;'>"+series.value+"</div>"; 
     } 

    }); 


    </script> 
</head> 
<body> 

    <div id="header"> 
     <h2 style='text-align:center'>Funnel Charts</h2> 
    </div> 

    <div id="content"> 

     <h3 id="title"></h3> 
     <div class="demo-container"> 
      <div id="placeholder" class="demo-placeholder" style="length:250px,width:250px"></div> 
     </div> 

    </div> 

</body> 
</html>

출처

2016-09-10 akshay burjwal

귀하의 데이터가 잘못된 형식으로의 플롯 기능을위한 데이터 소스로 작동하지 않습니다. plugin documentation에서 예상되는 데이터 형식 (데이터가 배열의 배열에없는)입니다 :

var data = [ 
    { 
     label: "a", 
     data: [ [ 1, 10 ] ] 
    }, 
    { 
     label: "b", 
     data: [ [ 1, 81 ] ] 
    }, 
    { 
     label: "c", 
     data: [ [ 1, 20 ] ] 
    }, 
    { 
     label: "d", 
     data: [ [ 1, 90 ] ] 
    } 
];

이 JS Fiddle은 당신의 데이터가있는 깔때기 형 차트의 작업 예제가 있습니다.

출처

2016-09-12 12:00:30 mechenbier

flot.js 및 데이터 소스를 외부 json 파일로 사용하는 깔때기 형 차트 표시

답변

관련 문제