extjs - highcharts - plotline test
HTML
<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts/Serie.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts/LineSerie.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts/SplineSerie.js"></script>
JavaScript
var store = new Ext.data.ArrayStore({
fields: ['month', 'value'],
data: [
['jan', 1],
['feb', 2],
['mar', 3],
['apr', 4],
['mai', 5],
['jun', 6],
['jul', 16],
['aug', 2],
['sep', 7],
['oct', 4],
['nov', 3],
['dec', 11]
]
});
var chart = Ext.create('Chart.ux.Highcharts', {
series: [{
dataIndex: 'value'
}],
xField: 'month',
store: store,
chartConfig: {
chart: {
type: 'spline'
},
title: {
text: 'A simple graph'
},
xAxis: {
plotLines: [{
color: '#FF0000',
width: 5,
value: 'mar'
}]
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'Highcharts-Test',
width: 500,
height: 500,
layout: 'fit',
renderTo: Ext.getBody(),
items: [chart]
});
store.load();