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

Question

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

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

Sencha 网站上提供的示例：

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

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