Question

我正在尝试创建一个包含多个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
                    }
                }

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

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

1 个答案: