Changing color depending on value

问题:

Im working on morris js graph.

The Graph is rendering, but I would like to change the colors or dots depending on values from db.

I want to change color when action = buy.

My JSON:

[{"longdate":"2014-08-20 18:20:01","price":"1620","action":"buy"},{"longdate":"2014-08-20 18:40:01","price":"1640","action":""},{"longdate":"2014-08-20 19:00:01","price":"1620","action":""}]

Morris script:

  $.getJSON('results.json', function(day_data) {

    Morris.Line({
      element: 'graph',
      data: day_data,
      action: 'action',
      xkey: 'longdate',
      ykeys: ['price'],
      labels: ['Cena'],
      pointSize: 4,
      lineColors: function(action) {
        if(action == "buy") return "#0da3be";
        else if(price == "sell") return "#11ca26";
        else return "#722c7c";
    },
      hoverCallback: function(index, options, content) { 
         //var displayDate = "<b>"+changeDateFormat(day_data[index]['clock'])+"</b><br>";
         var date = "<b><font color='black'>Data: "+day_data[index]['longdate']+"</font></b><br>";
         var param1 = "<font color='"+lineColor[0]+"'>Cena - "+day_data[index]['price']+"</font><br>";
         return date+param1;
      },
      xLabelFormat : function (x) {
       return changeDateFormat(x);
      }

    });
  });

Changing the color doesnt work, how I can make it work?

回答1:

I see an array of objects. So for each object you can just check the buy field.

function drawLine(action){

 if(!action) return;

 var color = null;
 if(action == "buy") color ="red";
 else color = "black";

 Morris.Line({
      element: 'graph',
      data: day_data,
      action: 'action',
      xkey: 'longdate',
      ykeys: ['price'],
      labels: ['Cena'],
      pointSize: 4,
      lineColors: function() {
        return color;
    },
      hoverCallback: function(index, options, content) { 
         //var displayDate = "<b>"+changeDateFormat(day_data[index]['clock'])+"</b><br>";
         var date = "<b><font color='black'>Data: "+day_data[index]['longdate']+"</font></b><br>";
         var param1 = "<font color='"+lineColor[0]+"'>Cena - "+day_data[index]['price']+"</font><br>";
         return date+param1;
      },
      xLabelFormat : function (x) {
       return changeDateFormat(x);
      }

    });
}

Now parse data that you have

$.getJSON('results.json', function(day_data) {
  var l = day_data || [];
  for(var i = 0; i < l.length; i++){
    drawLine(l[i].action);
  }
});