ExtJS+ASP.NET自定義曲線

第一步：創建Store數據源

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

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

第二步：創建曲線

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

Ext.onReady(function () {
    //store1.loadData(generateData(8));
    var chart = Ext.create('Ext.chart.Chart', {
        renderTo: Div3,
        width: 500,
        height: 300,
        style: 'background:#fff',
        animate: true,
        store: store1,
        shadow: true,//賦予線條陰影效果
        theme: 'Category1',
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['Oil_Production', 'Water_Injection', 'Gas_Production'],
            title: '日產油',
            minorTickSteps: 0.1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: '月份'
        }],
        series: [{
            type: 'line',//說明這裏是折線圖
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'Oil_Production',
            markerConfig: {
                type: 'circle',//關鍵轉折點的類型
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'name',
            yField: 'Water_Injection',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'name',
            yField: 'Gas_Production',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }]
    });
});