如何在敏锐的 IO 中创建具有多个 y 轴的图形答案

【问题标题】：How to create graph with multiply y axes in keen IO如何在敏锐的 IO 中创建具有多个 y 轴的图形
【发布时间】：2018-05-17 18:28:58
【问题描述】：

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

编辑：想通了，只需要添加到 chartOptions ：

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

【问题讨论】：

到目前为止你尝试了什么？

标签： data-visualization keen-io keen-js

【解决方案1】：

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));

【讨论】：