logo标签列表

ZingChart 如何根据 X 轴刻度改变绘图 CSS

angularjschartszingchart
6

我将使用AngularJS的ZingChart。

我有一个简单的图表，但是如果x轴日期<当前日期，则希望我的数据点是红色的。

我发现可以设置一些规则来处理这个问题。

"plot":{
"rules":[
    {
        "rule":"%v  20 && %v < 30",
        "line-color":"#f93",
        "line-width":"8",
        "line-style":"dashed"
    },
]

如果绘图值在20-30之间，将更改CSS。我的问题是 -> 如何根据X轴刻度值更改绘图背景颜色？我无法在绘图属性上引用x-scale属性。

1个回答
7
您需要寻找%scale-key-text标记，而不是简单的%v。%scale-key-text将针对scale-x轴。 http://www.zingchart.com/docs/basic-elements/zingchart-tokens/ 

var myConfig = {
  "type": "line",
  "title":{
    "text":"%scale-key-value"
  },
  "subtitle":{
    "text":"the parsed value"
  },
  "crosshair-x":{
    "plot-label":{
      "text":"%scale-key-value: $%v",
      "decimals":2,
      "transform":{
        "type":"date",
        "all":"%g:%i %A"
      }
    },
    "scale-label":{
      "visible":false
    }
  },
  "plot":{
    "tooltip":{
      "visible":false
    },
    "rules": [
      {
        rule: "%scale-key-text > 1457116200000",
        lineColor: "red"
      }
      ]
  },
  "utc":true,
  "timezone":-5,
  "scale-x":{
    "min-value":"1457101800000",
    "max-value":"1457125200000",
    "step":"30minute",
    "transform":{
      "type":"date",
      "all":"%g:%i"
    },
    "label":{
      "text":"Trading Day"
    },
    "item":{
      "font-size":10
    }, 
    "max-items":14,
  },
  "scale-y":{
    "values":"30:34:1",
    "format":"$%v",
    "label":{
      "text":"Price"
    },
    "item":{
      "font-size":10
    }
  },
 "series": [
  {
    "values":[
      [1457101800000,30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
      [1457103600000,31.30], //10:00 a.m.
      [1457105400000,30.95], //10:30 a.m.
      [1457107200000,30.99], //11:00 a.m.
      [1457109000000,32.33], //11:30 a.m.
      [1457110800000,33.34], //12:00 p.m.
      [1457112600000,33.01], //12:30 p.m.
      [1457114400000,34], //1:00 p.m.
      [1457116200000,33.64], //1:30 p.m.
      [1457118000000,32.59], //2:00 p.m.
      [1457119800000,32.60], //2:30 p.m.
      [1457121600000,31.99], //3:00 p.m.
      [1457123400000,31.14], //3:30 p.m.
      [1457125200000,32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    ]
  }
 ]
};

zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 300, 
 width: "100%"
});
<!DOCTYPE html>
<html>
 <head>
   <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接