extjs4图表绘制之折线图实现方法分析

关于“extjs4图表绘制之折线图实现方法分析”的完整攻略，我将给你详细讲解。

1. 前言

折线图是常用的一种图表类型，它可以帮助我们展示数据的变化趋势和规律。而在extjs4中，我们也可以轻松地利用其中的图表组件来绘制折线图。下面是具体实现步骤。

2. 准备工作

在开始绘制折线图之前，我们需要做一些准备工作。

首先，我们需要导入extjs4中的chart.js文件，这个文件包含了绘制图表所需要的所有功能和组件。

<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-chart.js"></script>

然后，我们需要准备一些数据，这些数据将用来绘制折线图。以一个简单的示例为例，假设我们要展示一组股票价格的变化趋势。我们可以创建一个数组来存储这些数据，每个元素表示一天的价格。

var data = [
    { date: '2018-01-01', price: 12.5 },
    { date: '2018-01-02', price: 13.2 },
    { date: '2018-01-03', price: 14.5 },
    { date: '2018-01-04', price: 13.8 },
    { date: '2018-01-05', price: 15.2 },
];

3. 创建图表

接下来，我们需要创建一个图表组件来展示我们的数据。在extjs4中，图表组件可以通过Ext.chart.Chart类来创建。首先，我们需要定义一个容器来包含图表组件：

var container = Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: 'fit',
    width: 500,
    height: 400
});

然后，我们可以创建图表组件并添加到容器中：

var chart = Ext.create('Ext.chart.Chart', {
    xtype: 'chart',
    animate: true,
    store: Ext.create('Ext.data.Store', {
        fields: ['date', 'price'],
        data: data
    }),
    axes: [{
        type: 'numeric',
        position: 'left',
        fields: ['price'],
        title: '价格'
    }, {
        type: 'category',
        position: 'bottom',
        fields: ['date'],
        title: '日期'
    }],
    series: [{
        type: 'line',
        xField: 'date',
        yField: 'price',
        title: '股票价格',
        style: {
            lineWidth: 2
        },
        markerConfig: {
            radius: 4,
            size: 4
        },
        highlight: {
            fill: '#000',
            radius: 5,
            lineWidth: 2,
            stroke: '#fff'
        },
        tips: {
            trackMouse: true,
            width: 120,
            height: 40,
            renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('date') + ': ' + storeItem.get('price'));
            }
        }
    }]
});
container.add(chart);

这段代码中，我们创建了一个line类型的series用于绘制折线图，并定义了markerConfig和highlight属性来设置折线图的样式和交互效果，同时也定义了tips属性用于在鼠标悬停时显示数据提示。注意，我们需要将store设置为我们之前定义好的包含股票价格数据的数据源。

4. 控制图表样式

在创建完图表组件后，我们还可以通过控制其样式来进一步美化折线图。下面是一些控制样式的示例代码。

设置折线图的背景色：

chart.setStyle('background-color', '#f5f5f5');

设置折线图的边框颜色：

chart.setTheme({
    axis: {
        stroke: 'gray'
    },
    series: {
        stroke: 'green'
    }
});

通过设置图表的theme属性，我们定制了图表的样式。其中，axis表示图表的坐标轴，series表示折线图的路径线。

5. 示例1：添加动态数据

对于图表组件来说，我们可以通过store的loadData方法来动态添加数据。下面是一个示例代码：

var store = chart.getStore();
store.loadData([
    { date: '2018-01-06', price: 13.5 },
    { date: '2018-01-07', price: 12.8 },
    { date: '2018-01-08', price: 14.2 },
    { date: '2018-01-09', price: 13.4 }
], true);

这个示例中，我们调用chart的getStore方法获取其对应的数据源，然后调用loadData方法添加新的数据。注意，第二个参数为true表示我们重新加载数据，并清空已有的数据。

6. 示例2：设置坐标轴范围

在某些情况下，我们可能需要手动设置坐标轴的范围，以确保数据能够更好地展示。下面是一个示例代码：

var axis = chart.getAxes()[0];
axis.setMinimum(0);
axis.setMaximum(20);

这个示例中，我们获取了折线图的第一个坐标轴，然后通过调用setMinimum和setMaximum方法手动设置坐标轴的最小值和最大值。

7. 总结

通过上述攻略，我们可以看到，在extjs4中绘制折线图并不是一件复杂的事情。只需要准备好数据，创建好图表组件即可。同时，我们还可以通过控制图表的样式和动态更新数据，使得折线图更加生动和实用。