Как создать график с умножением осей Y в остром IO - PullRequest
Новая
       1

Как создать график с умножением осей Y в остром IO

0 голосов
/ 17 мая 2018

Я пытаюсь создать график с несколькими осями 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
                    }
                }

1 Ответ

0 голосов
/ 18 мая 2018

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