多边形和更改线颜色取决于Zingchart中的列值 [英] Multiplot and change line color depending on column value in Zingchart
问题描述
背景信息：
我想将gnuplot图传送到Zingchart。我包含了gnuplot的源代码来更好地解释我的目标：
reset
set autoscale
set term canvas rounded solid butt size 1000,600增强型fsize 10 mousing lw 1 fontscale 1 jsdir/ home / eballes / Work / js
设置输出'html / data.html'
设置网格
设置yr [0:39]
设置标题'状态'
设置xdata时间
设置xlabel时间
set ylabel元素ID
设置timefmt％s
设置格式x％d％H：％M
设置点数.25
设置调色板模型RGB maxcolors 7
设置调色板模型RGB定义（1＃0000FF 2＃0000FF，2＃00FFFF，3＃00FFFF，3＃FF7F50，4＃FF7F50，4＃FFFF00，5＃FFFF00 ＃EE82EE，6＃00FF00，7＃00FF00，7＃FF0000，8＃FF0000）
set cbrange [1：8]
plotdata.datu 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（它是常量，所以它是一条线），颜色将取决于第三列，并根据定义的调色板。它将如下所示：
< img src =https://i.stack.imgur.com/zPv2q.pngalt =绘制数据的Gnuplot结果>
正如你可以看到的结果是令人满意的，但是输入数据的格式是非常低效的，情节本身是一种黑客。我敢打赌，在gnuplot也有更好的方法得到类似的东西。
em>
我想要一个类似的（更好的）用Zingchart绘制的情节。
我可以随意修改CSV输入，我的第一次尝试是尝试从堆叠条图案以绘制给定状态的持续时间。但是，我不知道如何正确地绘制Y轴上的时间（不从0开始），或者如何根据不同列中的值来改变栏的颜色，而不是分配 style 类在文档的JavaScript示例中执行：
{
values：[null，3，null，null，null]，
class：green
}，
所以，我终于试图重新创建我的旧gnuplot方法直接Zingchart，我也失去了。我不知道如何避免Zingchart绘制每一列或根据不同列的值更改线颜色。
问题：
假设这不是 XY问题 。
在Zingchart中，给定一个CSV文件，如何绘制一列取决于/修改第二个不是
完全公开，我是ZingChart团队的成员。这听起来像你需要做的ZingChart是利用我们的规则< a>。将规则属性添加到我们的情节对象将根据这些定义的规则集检查每个节点。这里有一小段代码，将根据该节点的值更改您的条形的backgroundColor。
plot：{
rules：[
{
//如果值在5和7之间改变背景颜色
rule：'％v> 5&& ％v < 7'，
backgroundColor：'＃69F0AE'//亮绿色
}
]
} ...
根据你的问题，我们想要检查每个条对一个特定值，不一定是该条的值。您可以通过创建系列中创建的自定义标记来实现此目的对象与起始前缀'data-'来定义令牌。您可以将令牌命名为任何您想要的名称。您可以传递自定义标记一个数组，其长度与传入的值相同，在您的情况下将是您的csv文件的第二列。请检查它。
系列：[
{
values：[
[1451692800000， 5]，
[1451779200000,10]，
[1451865600000,3]，
[1451952000000,1]
]，
}，
{
值：[
[1451692800000,2]，
[1451779200000,5]，
[1451865600000,4]，
[1451952000000,9]
] ，
}，
{
values：[
[1451692800000,3]，
[1451779200000,6]，
[1451865600000,9] b $ b [1451952000000,1]
]，
'data-customValue'：[1,6,3,4,6] //自定义令牌可以在上面的规则中访问。此标记仅适用于本系列，您必须将其添加到其他人才能定义
}]
定义您的令牌后，您可以在规则中访问该令牌，并根据该自定义令牌值调整条形颜色。我做了一个完整的演示，它结合了一个堆叠的条形图，绘制时间戳值，并基于值和自定义标记值调整一些酒吧的颜色。如果我没有以正确的方式回答您的问题，请直接发电子邮件给我们支持帮助：support@zingchart.com。您可以查看我们的帮助中心，也可以访问我们的网站，并尝试通过聊天与我们联系。感谢您的时间！
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：[{//如果值在5和7之间改变背景颜色规则：'％v> 5&& ％v < 7'，backgroundColor：'＃69F0AE'//亮绿色}，{//如果自定义标记值小于5，则更改背景颜色规则：'％data-customValue< = 5'，backgroundColor：'＃E040FB'亮紫色}]，系列：[{values：[[1451692800000,5]，// Jan 2 [1451779200000,10]，// Jan 3 [1451865600000,3]，// Jan 4 [1451952000000,1] // [1451692800000,5]，[1451865600000,4]，[1451952000000,9]]，}，{值：[[1451692800000,3]，[1451779200000]，[ 6]，[1451865600000,9]，[1451952000000,1]]，'data-customValue'：[1,6,3,4,6] //自定义令牌可以在上面的规则中访问。这个标记只适用于这个系列，你必须将它添加到其他人来定义}，]}; zingchart.render（{id：'myChart'，data：myConfig，height：400，width：'100 ％'}）;
<！DOCTYPE html& ; html> < head> <！ - 资源将在这里注入编译。使用上面的资源按钮 - > < script src =https://cdn.zingchart.com/zingchart.min.js\"> ;</script> <！ - 注入结束 - > < / head> < body> < div id ='myChart'>< / div> < / body>< / html>
Background information:
I want to port a gnuplot graph to Zingchart. I include the gnuplot source to better explain my 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
The data file I am plotting is the following, being the first column the unix timestamp, the second column the ID of the element and the third column the status:
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
And the result will plot the value of the ID (which is constant, so it's a line) and the color will depend on the third column and is according to the palette defined. It will look like this:
As you can see the result is satisfactory but the format of the input data is very inefficient and the plot itself is sort of a hack. I bet there are better ways to get something similar in gnuplot too.
Problem:
I want a similar (better) plot made with Zingchart.
Now, I have freedom to modify the CSV input at will and my first attempt was to try starting from the stacked bar pattern to plot the duration of a given status. However, I couldn't figure out how to plot the time in the Y-Axis correctly (not starting at 0) or how to change the color of the bar depending of a value in a different column instead of assigning a style class as done in the JavaScript example of the documentation:
{
"values":[null,3,null,null,null],
"class":"green"
},
So at last I've attempted to recreate my old gnuplot approach directly to Zingchart and I'm also lost. I don't know how to avoid Zingchart from plotting every column or to change the line color depending on values of different columns.
Question:
Assuming that this is not an XY Problem...
In Zingchart, given a CSV file, how can I plot one column depending on/modified by a second one which is not to be plotted?
Full Disclosure, I'm a member of the ZingChart team. It sounds like what you need to do with ZingChart is leverage our rules. Adding the rules attribute to our plot object will check every node against these defined set of rules. Here's a small snippet of code that will change the backgroundColor of your bars based on the value of that node.
plot:{
rules:[
{
//if value is between 5 and 7 change background color
rule:'%v > 5 && %v < 7',
backgroundColor:'#69F0AE' // bright green
}
]
}...
Based on your question we want to check each bar against a certain value, not necessarily the value of that bar. You can do this by creating custom tokens which are created in the series object with a starting prefix 'data-' to define the token. You can name the token anything you want. You can pass the custom token an array that is the same length as the values you passed in, which in your case will be column two of your csv file. Check it out.
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
}]
Once you have defined your token you can access that token in your rules and adjust the bar color based on that custom token value. I have made a full demo which incorporates a stacked bar chart, plotted with timestamp values and adjust some of the bar colors based on value and custom token values. If I didn't answer your question in the correct way please email us directly for support help: support@zingchart.com. You can check out our help center or come to our site and try and reach us through the chat. Thanks for your time!
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中的列值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![< img src =https://i.stack.imgur.com/zPv2q.pngalt =绘制数据的Gnuplot结果>](\"https://i.stack.imgur.com/zPv2q.png\"){kind=link}