如何使用ExtJS绘制旋转抛物线？

Question

我必须使用extjs图表（版本4.2.10）绘制旋转抛物线（类似）。

我应该画像this（只是曲线）：

但充其量我能得到this (on jsfiddle)。

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
    storeId: "chartData",
    fields: [
        { name: "x", type: "integer" },
        { name: "y", type: "integer" }
    ],
    data: [
        [10,14],
        [5,10],
        [2,6.3],
        [0,2],
        [2,1],
        [5,2]
    ]

});

var win = Ext.create("Ext.chart.Chart", {
    width: 600,
    height: 400,
    hidden: false,
    title: "Example 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: ["y"],
            title: "Y",
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: "#ddd",
                    stroke: "#bbb",
                    "stroke-width": 0.5
                }
            }
        }, {
            type: "Category",
            position: "bottom",
            fields: ["x"],
            title: "X"
        }],
        series: [{
            type: "line",
            highlight: {
                size: 7,
                radius: 7
            },
            axis: "left",
            smooth: true,
            xField: "x",
            yField: "y",
            title: "Rotated Parabola (not working)",
            markerConfig: {
                type: "cross",
                size: 4,
                radius: 4,
                "stroke-width": 0
            },
        }]

});

我的同事建议使用Highchart for ExtJS，但我们无法绘制这样的情节。请注意，解决方案应在 IE9 上运行。

有什么建议吗？

Answer 1

这里的问题是这样的曲线有两个值y到一个x值，而用折线图无法实现。

一种可能性是使用Ext图表绘制直线抛物线，然后使用css transform旋转整个图表。