Question

以下是我的代码：https://fiddle.sencha.com/#fiddle/15ef，我希望实现与此处相同的设计结果http://dev.sencha.com/extjs/5.1.0/examples/charts-kitchensink/#marked-line正如您所看到的，尽管代码类似，但我的代码呈现的是完全不同的图表。请帮忙！提前谢谢。

Answer 1

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
                storeId: "chartData",
                fields: ['question', 'interviewer', 'employee' ],
                data: [
                    ["erti",6,7],
                    ["ori",7,4],
                    ["sami",3,6],
                        ["otxi",1,9],
                        ["xuti",6,8],
                    ["eqvsi",6,4],
                    ["shvidi",7,3],
                    ["rva",3,2]
                ]
            });
Ext.create({
                xtype: 'chart',
                width: '100%',
                height: 410,
                padding: '10 0 0 0',
                renderTo: document.body,
                animate: true,
                shadow: true,
                style: 'background: #fff;',
                legend: {
                    docked: 'right',
                    border: 0,
                    margin: 0,
                    labelFont: '12px Helvetica'
                },
                store: chartDataStore,
                insetPadding: 40,
                axes: [{
                    type: 'numeric',
                    fields: ['interviewer', 'employee' ],
                    position: 'left',
                    maximum:9,
                    grid: true,
                    minimum: 0,
                    minorTickSteps: 1
                }, {
                    type: 'category',
                    fields: 'question',
                    position: 'bottom',
                    grid: true,
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }
                }],
                series: [{
                    type: "line",
                    axis: "left",
                    xField: "question",
                    yField: "interviewer",
                    title: "Interviewer",
                    marker: true,
                    style: {
                        'stroke-width': 4
                    },
                    markerConfig: {
                        type: 'circle',
                        radius: 4,
                        fill: '#fff'
                    },
                    highlight: {
                        fill: '#000',
                        radius: 5,
                        'stroke-width': 2,
                        stroke: '#fff'
                    },
                    tips:{
                        trackMouse: true,
                        style: 'background: #FFF',
                        height: 20,
                        renderer: function(storeItem, item) {
                            var title = item.series.title;
                            this.setTitle(title + ' for ' + storeItem.get('employee') + ': ' + storeItem.get('interviewer') + storeItem.get('question'));
                        }

                    }

                }, {
                    type: "line",
                    axis: "left",
                    xField: "question",
                    yField: "employee",
                    title: "Employee",
                    marker: true,
                    style: {
                        'stroke-width': 4
                    },
                    markerConfig: {
                        type: 'circle',
                        radius: 4,
                        fill: '#fff'
                    },
                    highlight: {
                        fill: '#000',
                        radius: 5,
                        'stroke-width': 2,
                        stroke: '#fff'
                    },
                    tips: {
                        trackMouse: true,
                        style: 'background: #FFF',
                        height: 20,
                        renderer: function(storeItem, item) {
                            var title = item.series.title;
                            this.setTitle(title + ' for ' + storeItem.get('employee') + ': ' + storeItem.get('interviewer') + storeItem.get('question'));
                        }

                    }

                }]

            });

您在最新版本上使用extjs，示例在extjs 4上，图表已更改，请使用这些文档http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/ 如此多的配置是最新的extjs 4，使用始终相关的文档来设置现有的配置而不是弃用的配置。如果正确请投票

Extjs图表渲染问题

1 个答案: