ExtJS+ASP.NET自定义曲线

第一步：创建Store数据源

var myData = [];
    myData.push({ &＃39;name&＃39;: &＃39;1&＃39;, &＃39;Oil_Production&＃39;: &＃39;30&＃39;, &＃39;Water_Injection&＃39;: &＃39;55&＃39;, &＃39;Gas_Production&＃39;: &＃39;23&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;2&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;3&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;4&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;5&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;6&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;7&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;8&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;9&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;10&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;11&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });
    myData.push({ &＃39;name&＃39;: &＃39;12&＃39;, &＃39;Oil_Production&＃39;: &＃39;20&＃39;, &＃39;Water_Injection&＃39;: &＃39;25&＃39;, &＃39;Gas_Production&＃39;: &＃39;63&＃39; });

    store1 = Ext.create(&＃39;Ext.data.Store&＃39;, {
        fields: [&＃39;name&＃39;, &＃39;Oil_Production&＃39;, &＃39;Water_Injection&＃39;, &＃39;Gas_Production&＃39;],
        data: myData
    });

Ext.require(&＃39;Ext.chart.*&＃39;);
Ext.require([&＃39;Ext.Window&＃39;, &＃39;Ext.fx.target.Sprite&＃39;, &＃39;Ext.layout.container.Fit&＃39;, &＃39;Ext.window.MessageBox&＃39;]);

Ext.onReady(function () {
    //store1.loadData(generateData(8));
    var chart = Ext.create(&＃39;Ext.chart.Chart&＃39;, {
        renderTo: Div3,
        width: 500,
        height: 300,
        style: &＃39;background:#fff&＃39;,
        animate: true,
        store: store1,
        shadow: true,//赋予线条阴影效果
        theme: &＃39;Category1&＃39;,
        legend: {
            position: &＃39;right&＃39;
        },
        axes: [{
            type: &＃39;Numeric&＃39;,
            minimum: 0,
            position: &＃39;left&＃39;,
            fields: [&＃39;Oil_Production&＃39;, &＃39;Water_Injection&＃39;, &＃39;Gas_Production&＃39;],
            title: &＃39;日产油&＃39;,
            minorTickSteps: 0.1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: &＃39;#ddd&＃39;,
                    stroke: &＃39;#bbb&＃39;,
                    &＃39;stroke-width&＃39;: 0.5
                }
            }
        }, {
            type: &＃39;Category&＃39;,
            position: &＃39;bottom&＃39;,
            fields: [&＃39;name&＃39;],
            title: &＃39;月份&＃39;
        }],
        series: [{
            type: &＃39;line&＃39;,//说明这里是折线图
            highlight: {
                size: 7,
                radius: 7
            },
            axis: &＃39;left&＃39;,
            xField: &＃39;name&＃39;,
            yField: &＃39;Oil_Production&＃39;,
            markerConfig: {
                type: &＃39;circle&＃39;,//关键转折点的类型
                size: 4,
                radius: 4,
                &＃39;stroke-width&＃39;: 0
            }
        }, {
            type: &＃39;line&＃39;,
            highlight: {
                size: 7,
                radius: 7
            },
            axis: &＃39;left&＃39;,
            smooth: true,
            xField: &＃39;name&＃39;,
            yField: &＃39;Water_Injection&＃39;,
            markerConfig: {
                type: &＃39;circle&＃39;,
                size: 4,
                radius: 4,
                &＃39;stroke-width&＃39;: 0
            }
        }, {
            type: &＃39;line&＃39;,
            highlight: {
                size: 7,
                radius: 7
            },
            axis: &＃39;left&＃39;,
            smooth: true,
            xField: &＃39;name&＃39;,
            yField: &＃39;Gas_Production&＃39;,
            markerConfig: {
                type: &＃39;circle&＃39;,
                size: 4,
                radius: 4,
                &＃39;stroke-width&＃39;: 0
            }
        }]
    });
});