甘特图重复TASKS样式

登录

Repeating tasks类型的图表，图形的样式怎么修改了，试了在html标签上加palette属性，但是表现出来还是只有一个颜色

像这样想用不同颜色区分三个区域

Richard.Ma · Richard.Ma

好的，也就是说一行里面不同的色块，按platete里的颜色排列是吧
https://www.grapecity.com/wijmo/ ... GanttRepeat/angular
比如在这个例子里，加上如下的代码

ganttItemFormatter = (engine: IRenderEngine, ht: HitTestInfo, defaultFormatter: Function) => {
if(this.index==ht.item.index){
this.paletteindex+=1;
console.log(this.paletteindex);
}
else{
this.index=ht.item.index
this.paletteindex=0;
}
engine.fill=this.palette[this.paletteindex];
defaultFormatter();
}

复制代码

Richard.Ma · Richard.Ma

也就是说每一个task 用一个颜色是吧，你可以参考这个例子，在ganttItemFormatter事件中，先设置fill属性，然后再调用defaultFormatter，

复制代码

(￣-￣) · (￣-￣)

本帖最后由 (￣-￣) 于 2021-12-10 14:40 编辑

Richard.Ma 发表于 2021-12-10 14:26
也就是说每一个task 用一个颜色是吧，你可以参考这个例子，在ganttItemFormatter事件中，先设置fill属性， ...

不是每个Y轴对应一个颜色，是同一个Y轴里面不用的颜色，比如说A3，我现在做的数据里包含了三条不同的数据目前，这五条不同的数据我想填充不同的颜色，我把Y轴标签改了这样看能直观点

(￣-￣) · (￣-￣)

本帖最后由 (￣-￣) 于 2021-12-10 16:22 编辑

Richard.Ma 发表于 2021-12-10 14:50
好的，也就是说一行里面不同的色块，按platete里的颜色排列是吧
https://www.grapecity.com/wijmo/demos/C ...

解决了，多谢

Richard.Ma · Richard.Ma

不客气

(￣-￣) · (￣-￣)

本帖最后由 (￣-￣) 于 2021-12-13 09:33 编辑

Richard.Ma 发表于 2021-12-10 16:37
不客气

你好，我想追问一个问题，如果甘特图Repeating Tasks想做成组合的形式应该怎么做，我试了Bar chart里面的例子在series标签添加这种形式的代码,但是实际没有表现在画面上，data结构上只是在原本的数据里面多加了一套start1和end1

复制代码

data:{ index:0, id:"A1",name: 'Task1', start: new Date(2021, 0, 1,0), end: new Date(2021, 0, 1,1), start1: new Date(2021, 0, 1,0), end1: new Date(2021, 0, 1,2)},

复制代码

Richard.Ma · Richard.Ma

是的，加一个series标签即可
比如在线的demo例子中
https://www.grapecity.com/wijmo/demos/Chart/Special/Gantt/angular

把component.html变成这样，两个series不同名字（可能是这个原因导致没有显示）

<div class="container-fluid">
<wj-flex-chart #chart [itemsSource]="data" chartType="Bar" bindingX="name" [tooltipContent]="getTooltipContent"
[itemFormatter]="ganttItemFormatter" (rendered)="ganttChartRendered(chart, $event)" [palette]="palette">
<wj-flex-chart-series binding="start,end" name="s1"></wj-flex-chart-series>
<wj-flex-chart-series binding="start,end" name="s2"></wj-flex-chart-series>
<wj-flex-chart-axis wjProperty="axisY" [majorGrid]="false" [minorGrid]="true" [reversed]="true">
</wj-flex-chart-axis>
</wj-flex-chart>
</div>

复制代码

这样就可以看到效果了，当然，实际使用，你绑定不同的start和end日期字段就行了

(￣-￣) · (￣-￣)

Richard.Ma 发表于 2021-12-13 12:23
是的，加一个series标签即可
比如在线的demo例子中
https://www.grapecity.com/wijmo/demos/Chart/Specia ...

原来是这样，没想到name的问题，谢谢

Richard.Ma · Richard.Ma

不客气

		自动登录	找回密码
密码			立即注册

[已处理] 甘特图重复TASKS样式