Как легко сделать график с этой информацией в Json?
Я пытаюсь найти простой способ сделать гистограмму с информацией, полученной для базы данных позади моего сайта.
Я использую Js и PHP 7, большинство библиотек, которые я пробовал, имеют вид js / jQuery JsCharts или же CanvasJs, но я стремлюсь реализовать простую гистограмму, которая работает быстро, без необходимости читать тонны API без множества примеров для моего случая использования.
Как я могу реализовать простую гистограмму с данными ниже?
мои данные:
{
"area": "a33",
"production": 255
},{
"area": "a31",
"production": 324
},{
"area": "a58",
"production": 389
},{
"area": "a51",
"production": 121
},{
"area": "a28",
"production": 185
}
Решение
на самом деле есть недавний сервис (wannacharts.com), который работает как инструмент API, и вы отправляете только Json, и они возвращают диаграмму в формате png url или json с изображением base64 диаграммы.
Вы должны создать свою учетную запись, и они дают вам user_id, apikey и т.д ..
внутри есть дизайнер диаграммы, где вы должны определить некоторые параметры вашей диаграммы.
Вы можете сделать сообщение на URL с помощью JSON, как это:
{
"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
}]
}
Другие решения
С небольшим количеством javascript fiddlery вы можете сделать свою собственную гистограмму без особых усилий.
Я сделал вертикальный здесь.
Просто поиграйте со стилями, используйте ширину для представления производства. Вы можете даже рассчитать его в процентах, если хотите.
Посмотрите на стили, которые я реализовал. Я также использовал 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>detector