如何使用Json中的这些信息轻松地制作图表？

Question

我试图找到一种简单的方法，用我的网站后面的数据库检索信息来制作条形图。

我正在使用Js和PHP7，我尝试过的大多数库都是js/jQuery，比如JsCharts或CanvasJ，但我希望实现一个简单的条形图，它可以快速工作，而不必阅读大量api，而用例中没有很多示例。

如何用下面的数据实现一个简单的条形图？

myData：

{
      "area": "a33",
      "production": 255
  },{
      "area": "a31",
      "production": 324
  },{
      "area": "a58",
      "production": 389
  },{
      "area": "a51",
      "production": 121
  },{
      "area": "a28",
      "production": 185
  }

Answer 1

实际上，最近有一个类似于api工具的服务(wannacharts.com)，您只发送Json，它们返回png中的图表或带有图表的base64图像的json。你必须创建你的帐户，他们给你一个user_id，每个they，等等。

里面有一个图表设计器，您必须在其中定义图表的一些参数。

您可以用这样的json将文章发送到url：

{
    "provider_id":3222,
    "chart_id": 412,
    "api_key":"####api-key####",
    "data": [{
      "area": "a33",
      "production": 255
  },{
      "area": "a31",
      "production": 324
  },{
      "area": "a58",
      "production": 389
  },{
      "area": "a51",
      "production": 121
  },{
      "area": "a28",
      "production": 185
  }]
}

Answer 2

只要稍微修改一下javascript，您就可以制作自己的条形图，而无需付出很大的努力。

我在这里做了一个垂直的。只需发挥风格，使用宽度来表示生产。如果你愿意的话，你甚至可以把它算成百分比。

看看我实现的样式。我还使用了jQuery，因为它使生活变得更简单，但也可以通过简单的javascript实现。

​

+function(json) {
  // Where the bar chart should go.
  var $wrap = $('#barwrap');
  
  // These are our dummy objects. Prepared here so we can simply clone them
  var $barrow = $('<div class="bar-row">');
  var $label = $('<label class="bar-label">');
  var $bar = $('<div class="bar">');
  
  // I use map here because it provides a nice scope to work in with 
  // scoped variables.
  json.map(function(el) {
      // cloning the dummy objects
      var $br = $barrow.clone();
      var $l = $label.clone();
      var $b = $bar.clone();
      
      // putting the name into the object
      $l.text(el.area);
      // setting the width of the bar chart. 
      // You could implement a percentage calculation here
      $b.width(el.production);
      // Setting the value as text
      $b.text(el.production);
      // Add the label first so it will always be left
      $br.append($l);
      // add the bar so it will be right
      $br.append($b);
      // add label + bar to the html page
      $wrap.append($br);
  });
}([{
      "area": "a33",
      "production": 255
  },{
      "area": "a31",
      "production": 324
  },{
      "area": "a58",
      "production": 389
  },{
      "area": "a51",
      "production": 121
  },{
      "area": "a28",
      "production": 185
  }]);

#barwrap {
   width: 500px;
   height: 500px;
}
/** setting a bar row to be always 100% wide, and to never align to the side of another element */
.bar-row {
    display: block;
    width: 100%;
    height: 3em;
    margin-bottom: 5px;
    clear: both;
}
/** The label is just a 50px element for containing the name of the data point */
.bar-label {
    display: inline-block;
    float: left;
    width: 50px;
    font-size: 1.2em;
    line-height: 2em;
}
/** The width of the actual bar is set by the javascript code **/
.bar {
    display: inline-block;
    float: left;
    background-color: blue;
    font-size: 1.2em;
    color: white;
    /** aligning the text to the right for visual effect **/
    text-align:right;
    padding-right: 5px;
    line-height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="barwrap">
  
</div>

​