Question

我正在研究morris js图。

图表正在渲染，但我想根据db。

中的值更改颜色或点

我想在行动=购买时改变颜色。

我的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脚本：

  $.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);
      }

    });
  });

改变颜色不起作用，我怎么能让它起作用？

Answer 1

我看到一个对象数组。因此，对于每个对象，您只需检查购买字段。

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);
      }

    });
}

现在解析你拥有的数据

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

根据值改变颜色

1 个答案: