使用 Sencha GXT 3，生成一个包含动态数量的线系列字段的折线图？

Posted 2023-02-16

【中文标题】使用 Sencha GXT 3，生成一个包含动态数量的线系列字段的折线图？

【英文标题】：Using Sencha GXT 3, generate a line chart populated with a dynamic number of line series fields?

【发布时间】：2012-05-18 14:36:26

【问题描述】：

使用 Sencha GXT 3.0 是否可以生成折线图并使用动态数量的折线序列字段填充它，如果可以，推荐的方法是什么？

我知道可以将多个系列字段添加到图表中，但折线图示例（以及与此相关的其他图表示例）使用扩展 PropertyAccess<?> 的接口，并且该接口指定静态数量的预期字段（例如 data1()、data2()、data3() 等）。如果要使用接口来指定要添加到图表中的字段，您如何解释可能需要 n 个字段（即给定图表上的 n 个线系列）的图表。

Sencha 网站上提供的示例：

http://www.sencha.com/examples/#ExamplePlace:linechart

【参考方案1】：

我遇到了同样的问题。如果每个系列都有一个商店而不是每个图表只有一个商店，那将是一个更好的设计。

我在 metricDataStore 中有一长串指标值。每个度量值都有一个描述。我希望所有具有相同描述的度量值都显示在一个（并且只有一个）系列上。如果值不应该在系列中，我让每个系列的值提供者在 x 轴和 y 轴上都返回 null。

这对我来说似乎是一个 hack，但它适用于我的使用：

    myChart = new Chart<MetricData>();
    myChart.setStore(metricDataStore);

。 . .

    for (MetricInfo info : metricInfoData) 
        LineSeries<MetricData> series = new LineSeries<MetricData>();
        series.setChart(myChart);
        series.setSmooth(false);
        series.setShownInLegend(true);
        series.setHighlighting(true);
        series.setYAxisPosition(Chart.Position.LEFT);
        series.setYField(new MetricValueProvider(info.getName()));
        series.setXAxisPosition(Chart.Position.BOTTOM);
        series.setXField(new MetricTimeProvider(info.getName()));
        myChart.addSeries(series);
    

。 . .

private class MetricTimeProvider extends Object implements ValueProvider<MetricData, Long> 
    private String metricName;

    public MetricTimeProvider(String metricName) 
        this.metricName = metricName;
    

    @Override
    public Long getValue(MetricData m) 
        if (metricName != null && metricName.equals(m.getLongDesc()))
            return m.getId();
        else
            return null;
    

    @Override
    public void setValue(MetricData m, Long value) 
    

    @Override
    public String getPath() 
        return null;
    


private class MetricValueProvider extends Object implements ValueProvider<MetricData, Double> 
    private String metricName;

    public MetricValueProvider(String metricName) 
        this.metricName = metricName;
    

    @Override
    public Double getValue(MetricData m) 
        if (metricName != null && metricName.equals(m.getLongDesc()))
            return m.getMetricValue();
        else
            return null;
    

    @Override
    public void setValue(MetricData m, Double value) 
    

    @Override
    public String getPath() 
        return null;
    

【讨论】：

似乎没有针对此问题的推荐解决方案，至少在当前的 3.0 版本中没有。我在 Sencha Q&A 论坛上发布了同样的问题，但我没有看到社区成员或 Sencha 开发团队的任何其他回复。虽然这可能不是最理想的方式，但它是一个可行的解决方案，所以我将其标记为答案。感谢您的回复！