Question

背景信息：

我想将gnuplot图移植到Zingchart。我包含了gnuplot源代码来更好地解释我的目标：

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开始绘制给定状态的持续时间。但是，我无法弄清楚如何正确绘制Y轴中的时间（不是从0开始）或如何根据不同列中的值更改条形图的颜色而不是指定{{ 1}}类在文档的JavaScript示例中完成：

style

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

问题：

假设这不是 XY问题 ...

在Zingchart中，给定一个CSV文件，我如何绘制一列，取决于修改第二列哪一列不被绘制？

Answer 1

完全披露，我是ZingChart团队的成员。听起来你需要用ZingChart做的就是利用我们的rules。将rules属性添加到plot object将根据这些已定义的规则集检查每个节点。这是一小段代码，它将根据该节点的值更改条形图的backgroundColor。

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

根据您的问题，我们希望针对某个值检查每个条形图，而不一定是该条形图的值。您可以通过创建在系列对象中创建的custom tokens来创建此项，并使用起始前缀＆＃39;数据 - ＆＃39;定义令牌。您可以根据需要为令牌命名。您可以将自定义标记传递给与传入的值长度相同的数组，在您的情况下，该数组将是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或访问我们的site，然后尝试通过聊天与我们联系。谢谢你的时间！

＆＃13;

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

＆＃13;

<!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>

＆＃13;

根据Zingchart中的列值多重绘制并更改线条颜色

1 个答案: