extjs4实现双纵坐标柱形图

最新推荐文章于 2020-08-26 17:27:26 发布

xianrake922

最新推荐文章于 2020-08-26 17:27:26 发布

阅读量759

点赞数

CC 4.0 BY-SA版权

文章标签： extjs4

本文链接：https://blog.youkuaiyun.com/xianrake922/article/details/14215385

本文展示了如何使用ExtJS4创建一个带有两个纵坐标的柱状图，包括数据存储、坐标轴配置和图表组件的详细设置，以实现数据的可视化展示。代码示例中包含数据加载、窗口布局以及图表系列和提示信息的定义。

代码：

Ext.onReady(function () {
var store1 = new Ext.data.JsonStore({
fields: ['data1', 'data2', 'name'],
data: [
{data1: 25, data2: 100, name: 'atrwettrrret'},
{data1: 33, data2: -240, name: 'btrweeeeeeeeeee'},
{data1: 56, data2: 355, name: 'cwwwwtertrwertwtr'},
{data1: 90, data2: 375, name: 'dtwretwetr35263twert'},
{data1: 3, data2: -240, name: 'btrweeeeeee'},
{data1: 6, data2: -55, name: 'cwwwwterwertwtr'},
{data1: 16, data2: 75, name: 'dtwretr35263twert'},
{data1: 88, data2: -59, name: 'etrwet33wr'},
{data1: 5, data2: 55, name: 'cwwwwwerftwtr'},
{data1: 56, data2: 355, name: 'cwwrtwtr'},
{data1: 9, data2: 35, name: 'detwetr35263twert'},
{data1: 80, data2: 89, name: 'qettwr'},
{data1: 54, data2: -55, name: 'cwtrewwwwerftwtr'},
{data1: 99, data2: 35, name: 'dtwretwetdfsads63twert'},
{data1: 84, data2: -59, name: 'etrwerewqrwr'},
{data1: 67, data2: 395, name: 'ftrwtwrtfasdrteytry'},
{data1: 32, data2: 58, name: 'gyutreywewetsst'}
]
});

var win = Ext.create('Ext.Window', {
width: 1000,
height: 400,
hidden: false,
maximizable: true,
title: '柱状图',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Dat

最低0.47元/天解锁文章

新学期VIP享超值加赠