문제

I'm trying to make a donut chart using morris.js (http://www.oesmith.co.uk/morris.js/donuts.html) but am having some issues with getting the data to format correctly.

Currently this is how the data is formatted.

{"2D"=>"6768.96", "1DP"=>"293.63", "3D"=>"84.97", "1D"=>"361.83", "GR-RES"=>"19083.85", "GR-COM"=>"11254.69"}

Below is my current code

<%= content_tag :div, "", id: "shipments-by-service-type", data: {shipments: @details.group(:family).sum("base_charge + discount")} %>


jQuery ->
  Morris.Donut
    element: "shipments-by-service-type"
    data: $('#shipments-by-service-type').data('shipments')

This is my first experience passing data into js and parsing to make a graph any help would be appreciated.

도움이 되었습니까?

해결책

So once you correct the quote issue I pointed out in the comments above, either escape or switch the outer quote to be single quotes, this javascript will parse your input and get it ready for the donut graph

var dataArr = [];
var obj = $("#shipments-by-service-type-simple").data('shipments');
for ( var prop in obj) {
  dataArr.push({"label": prop, "value": obj[prop]});
}

Morris.Donut({
  element: 'donut-example',
  data: dataArr
});

Here is the jsbin. It appears that raphael doesn't like the decimal values and is throwing errors. Might want to round your values

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