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

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 开始)或者如何根据不同列中的值更改条形的颜色而不是分配 样式 在文档的 JavaScript 示例中完成的类:

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

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

---

问题:

假设这不是一个XY 问题...

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

Answer 1

完全披露，我是 ZingChart 团队的成员。听起来您需要使用 ZingChart 做的是利用我们的 rules .将规则属性添加到我们的 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 来做到这一点它们是在系列对象中创建的，具有起始前缀“data-”以定义标记。您可以随意命名 token 。您可以将自定义 token 传递给与您传入的值长度相同的数组，在您的情况下，这将是您的 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
    }]

定义 token 后，您可以在规则中访问该 token 并根据该自定义 token 值调整条形颜色。我做了一个完整的演示，其中包含一个堆叠条形图，使用时间戳值绘制并根据值和自定义标记值调整一些条形颜色。如果我没有以正确的方式回答您的问题，请直接给我们发电子邮件寻求支持帮助:support@zingchart.com。您可以查看我们的help center或来我们的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>