根据 Zingchart 中的列值多图和更改线条颜色

Question

背景资料：

我想将 gnuplot 图移植到 Zingchart。我包括 gnuplot 源代码以更好地解释我的 objective:

reset
set autoscale
set term canvas rounded solid butt size 1000,600 enhanced fsize 10 mousing lw 1 fontscale 1 jsdir "/home/eballes/Work/js"
set output 'html/data.html'
set grid
set yr [0:39]
set title 'State'
set xdata time
set xlabel "Time"
set ylabel "Element ID"
set timefmt "%s"
set format x "%d %H:%M"
set pointsize .25
set palette model RGB maxcolors 7
set palette model RGB defined (1 "#0000FF", 2 "#0000FF", 2 "#00FFFF", 3 "#00FFFF", 3 "#FF7F50", 4 "#FF7F50", 4 "#FFFF00", 5 "#FFFF00", 5 "#EE82EE", 6 "#EE82EE", 6 "#00FF00", 7 "#00FF00", 7 "#FF0000", 8 "#FF0000")
set cbrange [1:8]
plot "data.dat" u 1:2:3 notitle w points pt 5 ps .1 palette

我正在绘制的数据文件如下，第一列是 unix 时间戳，第二列是元素的 ID，第三列是状态：

1446246146  22  6
1446246146  20  1
1446246146  11  6
1446246146  24  1
1446246146  30  1
1446246146  14  1
1446246146  18  1
1446246147  22  6
1446246147  20  1
1446246147  11  6
1446246147  24  1
1446246147  30  1
1446246147  14  1
1446246147  18  1
1446246148  22  6
1446246148  20  1
1446246148  11  6
1446246148  24  1
1446246148  30  1
1446246148  14  1
1446246148  18  1
1446246149  22  6
1446246149  20  1
1446246149  11  6

并且结果将绘制 ID 的值（它是常量，所以它是一条线）并且颜色将取决于第三列并且根据定义的调色板。它看起来像这样：

如您所见，结果令人满意，但输入数据的格式非常低效，而且情节本身有点乱七八糟。我敢打赌，在 gnuplot 中也有更好的方法来获得类似的东西。

问题：

我想要一个用 Zingchart 制作的类似（更好）的图。

现在，我可以随意修改 CSV 输入，我的第一次尝试是尝试从 stacked bar pattern 开始绘制给定状态的 duration .但是，我无法弄清楚如何正确地在 Y 轴上绘制时间（不是从 0 开始）或者如何根据不同列中的值更改条形的颜色而不是分配 style class 在文档的 JavaScript 示例中完成：

            {
                "values":[null,3,null,null,null],
                "class":"green"
            },

所以最后我试图重新创建我的旧 gnuplot 方法直接用于 Zingchart 但我也迷路了。我不知道如何避免 Zingchart 绘制每一列或根据不同列的值更改线条颜色。

问题：

假设这不是 XY 问题...

在 Zingchart 中，给定一个 CSV 文件，我如何根据 根据 on/modified 绘制第二列 不绘制的列？

Answer 1

完全公开，我是 ZingChart 团队的成员。听起来您需要使用 ZingChart 做的是利用我们的 rules. Adding the rules attribute to our plot object 将根据这些定义的规则集检查每个节点。这是一小段代码，可以根据该节点的值更改条形图的背景颜色。

 plot:{
  rules:[
    {
      //if value is between 5 and 7 change background color
      rule:'%v > 5 && %v < 7',
      backgroundColor:'#69F0AE' // bright green
    }
  ]
}...

根据您的问题，我们要根据特定值检查每个条形图，不一定是该条形图的值。您可以通过创建 custom tokens 来完成此操作，这些 custom tokens 在具有起始前缀 'data-' 的系列对象中创建以定义令牌。您可以随意命名令牌。您可以将自定义令牌传递给与您传入的值长度相同的数组，在您的情况下，这将是您的 csv 文件的第二列。看看吧。

series : [
    {
        values : [
        [1451692800000,5],
        [1451779200000,10],
        [1451865600000,3],
        [1451952000000,1]
        ],
    },
    {
        values : [
        [1451692800000,2],
        [1451779200000,5],
        [1451865600000,4],
        [1451952000000,9]
        ],
    },
    {
        values : [
        [1451692800000,3],
        [1451779200000,6],
        [1451865600000,9],
        [1451952000000,1]
        ],
        'data-customValue':[1,6,3,4,6] //custom made tokens can be accessed in the rules above. This token only applies to this series, you would have to add it to the others for it to be defined
    }]

定义令牌后，您可以在规则中访问该令牌并根据该自定义令牌值调整条形颜色。我做了一个完整的演示，其中包含一个堆叠条形图，使用时间戳值绘制并根据值和自定义标记值调整一些条形颜色。如果我没有以正确的方式回答您的问题，请直接给我们发电子邮件寻求支持帮助：support@zingchart.com。您可以查看我们的 help center or come to our site 并尝试通过聊天联系我们。感谢您的宝贵时间！

var myConfig = {
  type: "bar",
  utc:true,
  title: {
    text: 'Stacked Timestamp With Custom Values And Rules'
  },
  scaleX:{
    transform:{
      type:'date',
      all:'%D, %d %M %Y'
    },
    minValue:1451606400000, // Jan 1
    step:'day'
  },
  plot:{
    stacked:true,
    barWidth:40,
    rules:[
      {
        //if value is between 5 and 7 change background color
        rule:'%v > 5 && %v < 7',
        backgroundColor:'#69F0AE' // bright green
      },
      {
        //if custom token value is less than 5 change background color
        rule:'%data-customValue <= 5',
        backgroundColor:'#E040FB' // bright purple
      }
    ]
  },
 series : [
  {
   values : [
     [1451692800000,5],  //Jan 2
     [1451779200000,10], //Jan 3
     [1451865600000,3],  //Jan 4
     [1451952000000,1]   //Jan 5
   ],
  },
  {
   values : [
     [1451692800000,2],
     [1451779200000,5],
     [1451865600000,4],
     [1451952000000,9]
   ],
  },
  {
   values : [
     [1451692800000,3],
     [1451779200000,6],
     [1451865600000,9],
     [1451952000000,1]
   ],
   'data-customValue':[1,6,3,4,6] //custom made tokens can be accessed in the rules above. This token only applies to this series, you would have to add it to the others for it to be defined
  },
 ]
};

zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 400, 
 width: '100%' 
});

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>

 <!--Inject End-->
 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

根据 Zingchart 中的列值多图和更改线条颜色

Multiplot and change line color depending on column value in Zingchart

javascript

csv

charts

plot

zingchart