自定义ExtJS折线图系列

Question

我的应用程序中要求创建具有多个系列的折线图。 问题是所有系列都从同一年开始。 我的要求是创建一个图表，就像在jsfiddle.net/pyrliu/JPEEv/2/中给出的示例一样

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
    storeId: "chartData",
    fields: [
        { name: "year", type: "integer" },
        "country1",
        { name: "value1", type: "integer" },
        "country2",
        { name: "value2", type: "integer" }
    ],
    data: [
        [1997,"USA",66,"Canada",53],
        [1998,"USA",81,"Canada",67],
        [1999,"USA",83,"Canada",46],
        [2000,"USA",61,"Canada",45],
        [2001,"USA",67,"Canada",53],
        [2002,"USA",68,"Canada",43]
    ]

});

var win = Ext.create("Ext.chart.Chart", {
    width: 600,
    height: 400,
    hidden: false,
    title: "Example working chart",
    renderTo: "demoChart",
    layout: "fit",
    style: "background:#fff",
        animate: true,
        store: chartDataStore,
        shadow: true,
        theme: "Category1",
        legend: {
            position: "bottom"
        },
        axes: [{
            type: "Numeric",
            minimum: 0,
            position: "left",
            fields: ["value1", "value2"],
            title: "Value",
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: "#ddd",
                    stroke: "#bbb",
                    "stroke-width": 0.5
                }
            }
        }, {
            type: "Category",
            position: "bottom",
            fields: ["year"],
            title: "Year"
        }],
        series: [{
            type: "line",
            highlight: {
                size: 7,
                radius: 7
            },
            axis: "left",
            smooth: true,
            xField: "year",
            yField: "value1",
            title: "USA",
            markerConfig: {
                type: "cross",
                size: 4,
                radius: 4,
                "stroke-width": 0
            },
        }, {
            type: "line",
            highlight: {
                size: 7,
                radius: 7
            },
            axis: "left",
            smooth: true,
            xField: "year",
            yField: "value2",
            title: "Canada",
            markerConfig: {
                type: "circle",
                size: 4,
                radius: 4,
                "stroke-width": 0
            }
        }]

});

在上面的示例中，美国和加拿大有两个系列。 我需要从2009年开始显示加拿大的数据。在上面的示例中，数据是从1997年开始的。我需要一个序列从1999年开始，而另一个序列从1997年开始。如何跳过同一商店的两个值？

Answer 1

您是否正在寻找类似jsFiddle的东西？ 这完全取决于数据的处理方式，您需要将空值视为空值，而不是0，因此这是convert函数起作用的地方。 道具去这个SO答案 。

// This is the juice to fix the problem
function convertInt(value) {
  if (typeof value !== 'number') // or other similar conversion
    return undefined;
  return value;
}

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
  storeId: "chartData",
  fields: [
    {name: "year", type: "integer"},
    "country1",
    {name: "value1", type: "integer", convert: convertInt},
    "country2",
    {name: "value2", type: "integer", convert: convertInt}
  ],
  data: [
    [1997, "USA", 66, "Canada", null],
    [1998, "USA", 81, "Canada", null],
    [1999, "USA", 83, "Canada", 46],
    [2000, "USA", 61, "Canada", 45],
    [2001, "USA", null, "Canada", 53],
    [2002, "USA", null, "Canada", 43]
  ]

});

var win = Ext.create("Ext.chart.Chart", {
  width: 600,
  height: 400,
  hidden: false,
  title: "Example working chart",
  renderTo: "demoChart",
  layout: "fit",
  style: "background:#fff",
  animate: true,
  store: chartDataStore,
  shadow: true,
  theme: "Category1",
  legend: {
    position: "bottom"
  },
  axes: [{
      type: "Numeric",
      minimum: 0,
      position: "left",
      fields: ["value1", "value2"],
      title: "Value",
      minorTickSteps: 1,
      grid: {
        odd: {
          opacity: 1,
          fill: "#ddd",
          stroke: "#bbb",
          "stroke-width": 0.5
        }
      }
    }, {
      type: "Category",
      position: "bottom",
      fields: ["year"],
      title: "Year"
    }],
  series: [{
      type: "line",
      highlight: {
        size: 7,
        radius: 7
      },
      axis: "left",
      smooth: true,
      xField: "year",
      yField: "value1",
      title: "USA",
      markerConfig: {
        type: "cross",
        size: 4,
        radius: 4,
        "stroke-width": 0
      },
    }, {
      type: "line",
      highlight: {
        size: 7,
        radius: 7
      },
      axis: "left",
      smooth: true,
      xField: "year",
      yField: "value2",
      title: "Canada",
      markerConfig: {
        type: "circle",
        size: 4,
        radius: 4,
        "stroke-width": 0
      }
    }]
});