本文整理汇总了TypeScript中c3.generate函数的典型用法代码示例。如果您正苦于以下问题：TypeScript generate函数的具体用法？TypeScript generate怎么用？TypeScript generate使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了generate函数的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: ngAfterViewInit
ngAfterViewInit(){
var chart = c3.generate({
data: {
// iris data from R
columns: [
['data1', 30],
['data2', 120],
],
type : 'pie',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
}
});
setTimeout(function () {
chart.load({
columns: [
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
}示例2: generateChart
private generateChart(gem: GemVersion[]) {
this.chart = c3.generate({
bindto: `#chart-${this.gemname}`,
size: {
height: 375,
},
data: {
json: gem,
keys: { value: ['number', 'downloads_count'] },
x: 'number',
labels: true,
names: { downloads_count: 'downloads/version' }
},
axis: {
x: {
type: 'category',
tick: { rotate: 90, multiline: false },
}
},
grid: { y: { show: true } },
line: { connectNull: true },
area: { zerobased: false },
bar: { zerobased: false, width: { ratio: 0.4 } },
});
}示例3: generateChart
export function generateChart(node){
let chart = c3.generate(
{
bindto: node,
data: {
columns: []
},
zoom: {
enabled: true,
rescale: true
},
});
return chart;
}示例4: ngOnInit
ngOnInit() {
// c3のグラフを準備する。
this.chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['diff_time'],
]
},
axis: { x: { type: 'category' } }
// transition: { duration: 100 }
});
// リプレイ用のc3のグラフを準備する。
this.chartReplay = c3.generate({
bindto: '#chartreplay',
data: { columns: [['diff_time']] },
axis: { x: { type: 'category' } },
});
this.service.SC.initializeWatchingSubscriptionsBeforeRegisterOnInit(this.cd); // 登録済みの変更監視Subscriptionを全て破棄する。
this.registerWatchingSubscriptionsAfterInitializeOnInit(); // ページ遷移入の度に変更監視Subscriptionを登録する。
}示例5: constructor
constructor(bindTo: string, used: number, max: number) {
this.chart = c3.generate({
bindto: bindTo,
size: {
width: 220,
height: 220
},
data: {
columns: [["Used", used], ["Free", max]],
type: "donut"
},
donut: {
title: "Memory"
}
});
}示例6: ngAfterViewInit
ngAfterViewInit(){
this.drawThermometer(80, 180, 500, 50, 220, 100, "#thermo1");
this.drawThermometer(80, 180, 500, 50, 350, 100, "#thermo2");
//this.redrawThermometer(80, 180, 500, 50, 120, 100, "#thermo1");
//this.redrawThermometer(80, 180, 500, 50, 450, 100, "#thermo2");
var chart = c3.generate({
data: {
x: 'x',
// xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06', '2013-01-07', '2013-01-08'],
['inferior', 30, 200, 100, 400, 150, 250, 300, 250] //,
//['data2', 130, 340, 200, 500, 250, 350]
],
types: {
inferior: 'area-spline'//,
//data2: 'area-spline'
},
colors: {
inferior: '#7df538'
}
},
size: {
height: 200,
width: 350
},
axis: {
x: {
type: 'timeseries',
tick: {
//format: '%Y-%m-%d'
rotate: 90,
format: '%Y-%m-%d'
//format: function (x) { return x.getFullYear(); }
},
height: 80
},
y: {
//max: .1,
//min: 0,
padding: { top: 10, bottom: 0, left:0, rigth:0 }
}
}
});
setTimeout(function () {
//this.redrawThermometer(80, 180, 500, 50, 120, 100, "#thermo1");
//this.redrawThermometer(80, 180, 500, 50, 450, 100, "#thermo2");
chart.load({
columns: [
['superior', 400, 500, 450, 700, 600, 500, 450, 550]
],
types: {
superior: 'area-spline'
},
colors: {
superior: '#f5387d'
}
});
}, 1000);
} 示例7: makeGraph
private makeGraph(data: any): void {
/*
Create the y axis values since c3 likes to use decimals
when creating tick marks
*/
let miny = Math.min(...data[1].slice(1));
let maxy = Math.max(...data[1].slice(1));
let yvalues = [];
for ( var i = miny; i <= maxy; i++ ){
yvalues.push(i);
}
this.graph = generate({
bindto: '#boardgames-chart',
padding: {
left: 20,
right: 15,
top: 10
},
data: {
x: 'x',
columns: data,
type: 'area'
},
grid: {
y: {
show: true
}
},
legend: {
show: false
},
tooltip: {
show: false
},
point: {
show: false
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %e'
},
padding: {
left: 0,
right: 0
}
},
y: {
tick: {
count: 4,
values: yvalues
},
min: 0,
padding: {
bottom: 0,
top: 0
}
}
},
size: {
width: 768,
height: 188
}
});
}