ExtJS+ASP.NET自訂曲線

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            }        }]    });});