根据值更改颜色 [英] Changing color depending on value

问题描述

我正在研究morris js图.

Im working on morris js graph.

图形正在渲染，但是我想根据db中的值更改颜色或点.

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.

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

    });
  });

更改颜色不起作用，如何使它起作用?

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

推荐答案

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

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

    });
}

现在解析您拥有的数据

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

这篇关于根据值更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！