【问题标题】:Plotting multiple lines on a Cube.js line graph在 Cube.js 折线图上绘制多条线
【发布时间】:2021-06-03 17:53:01
【问题描述】:

想象一个简单的折线图,绘制人数(y 轴)与自定义时间值(x 轴),如下所示:

假设您有另一个维度,比如特定的人群分组,您如何在此图上为每个组绘制单独的线?

【问题讨论】:

    标签: cube.js


    【解决方案1】:

    您必须在这里使用 PivotConfig 一个我在 Angular 中使用的示例 (编辑)这是查询

    Query = {
      measures: ['Admissions.count'],
      timeDimensions: [
        {
          dimension: 'Admissions.createdDate',
          granularity: 'week',
          dateRange: 'This quarter',
        },
      ],
      dimensions: ['Admissions.status'],
      order: {
        'Admissions.createdDate': 'asc',
      },
    }
    

    (结束编辑)

    PivotConfig = {
      x: ['Admissions.createdDate.day'],
      y: ['Admissions.status', 'measures'],
      fillMissingDates: true,
      joinDateRange: false,
    }
    

    从结果集中提取数据的代码:

    let chartData = resultSet.series(this.PivotConfig).map(item => {
            return {
              label: item.title.split(',')[0], //title contains "ADMIS, COUNT"
              data: item.series.map(({ value }) => value),
            }
          })
    

    结果对象(不是图表中的那个):

    [{
      "label": "ADMIS",
      "data": [2,1,0,0,0,0,0]
    },{
      "label": "SORTIE",
      "data": [2,1,0,0,0,0,0]
    }]
    

    这是输出的样子!

    【讨论】:

    • 谢谢美人。是否也可以包含查询?
    • 我添加了查询,希望对您有帮助!
    【解决方案2】:

    Developer Playground 中的图表渲染器非常简单;我建议创建一个仪表板应用程序或在现有项目中使用我们的一个前端集成来完全控制图表呈现。

    【讨论】:

    • 我已经创建了一个仪表板应用程序,并阅读了 QueryBuilder 和 QueryRenderer。我看到this demo 有一个带有多条线的图表,但这似乎是因为它使用了timeDimension。相反,是否可以将 x 轴设为一个 dimension 并为另一个 dimension 分别设置一行?
    • 认为您应该能够使用ResultSet 上的chartPivot() 属性来管理它
    猜你喜欢
    • 2019-10-27
    • 1970-01-01
    • 2017-10-05
    • 2017-01-02
    • 2021-04-02
    • 1970-01-01
    • 2017-05-14
    • 1970-01-01
    • 2016-10-09
    相关资源
    最近更新 更多