Question

我正在尝试使用flot.js库绘制漏斗图表，将外部json文件作为输入但是虽然获取了json，但它不能用作数据源且图表未被绘制。伙计们我有一个json文件SAMPLE.JSON

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

但它不能作为folt.js库的Plot函数的数据源

<!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>

Answer 1

您的数据格式错误。从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有一个包含数据漏斗图的工作示例。

使用flot.js和数据源显示漏斗图作为外部json文件

1 个答案: