如何在敏锐的IO中创建具有乘以y轴的图形



我正在尝试创建一个具有多个 y 轴的图形,如以下示例所示:http://c3js.org/samples/axes_y2.html,使用 Keen IO,但似乎无法弄清楚。有什么指示吗?

编辑:想通了,只需要添加到图表选项:

.chartOptions({
data: {
axes: {
"Series 1": "y2",
"Series 2": "y2"
}
},
axis:{
y: {
label: "label1"
},
y2: {
label: "label2",
show: true
}
}

https://github.com/keen/keen-dataviz.js#multiple-query-results-on-one-chart

const client = new KeenAnalysis({
projectId: 'YOUR_PROJECT_ID',
readKey: 'YOUR_READ_KEY'
});
const queryPageviews = client
.query({
analysis_type: 'count',
event_collection: 'pageviews',
timeframe: 'this_30_days',
interval: 'daily'
});
const queryFormSubmissions = client
.query({
analysis_type: 'count',
event_collection: 'form_submissions',
timeframe: 'this_30_days',
interval: 'daily'
});
client
.run([queryPageviews, queryFormSubmissions])
.then(results => {
const chart = new KeenDataviz({
container: '#some_container',
results,
// optional
labelMapping: {
'pageviews count': 'Pageviews',
'form_submissions count': 'Forms collected'
}
});
})
.catch(err => {
// Handle errors
console.error(err);
});

如果您不想过多地依赖查询 - 您可以随时传递自定义数据。 https://jsfiddle.net/94z60cpp/

const result = {
'clicks': [3, 14, 7, 22, 11, 55, 11, 22],
'views': [14, 58, 11, 32, 11, 23, 45, 66]
};
function customParser(data){
var ds = new KeenDataset();
Object.keys(data).forEach(dataKey => {
ds.appendColumn(dataKey);
data[dataKey].forEach((item, itemIndex) => {
ds.set([dataKey, itemIndex+1], item);
});
});
return ds;
}
chart
.render(customParser(result));

最新更新