Question

我有一个从我的商店检索数据的图表，以下是

的四位信息

型号代码

{
                            xtype: 'chart',
                            centered: true,
                            height: '150%',
                            colors: [
                                '#24ad9a',
                                '#7c7474',
                                '#a66111'
                            ],
                            store: 'ClipsViewed',
                            axes: [
                                {
                                    type: 'category',
                                    fields: [
                                        'meta_id'
                                    ],
                                    grid: true,
                                    label: {
                                        rotate: {
                                            degrees: 0
                                        },
                                        font: '7px'
                                    },
                                    title: 'Clips'
                                },
                                {
                                    type: 'numeric',
                                    fields: [
                                        'viewed'
                                    ],
                                    grid: true,
                                    position: 'left',
                                    title: 'Amount'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    renderer: function(sprite, config, rendererData, index) {

                                    },
                                    style: {
                                        minGapWidth: 1,
                                        minBarWidth: 60,
                                        maxBarWidth: 70,
                                        opacity: 0.80
                                    },
                                    xField: 'meta_id',
                                    yField: [
                                        'viewed',
                                        'glances'
                                    ]
                                }
                            ],
                            interactions: [
                                {
                                    type: 'panzoom'
                                }
                            ],
                            legend: {
                                xtype: 'legend'
                            }
                        }

现在，我将已查看的字段和扫视字段显示为图表中的数字字段，将标题字段显示为图表中的类别标题。

当我将鼠标悬停在该字段上时，我想呈现该字段的标题名称，原因是这个。标题太长，无法放在图表的x轴上，所以取代我正在放置的标题＆＃39; meta_id＆＃39;。因此，当我将鼠标悬停在x轴meta_id字段上时，我希望显示标题名称

所以例如

meta_id 100将等于标题值###

到目前为止，这是我的图表代码

.tab > div {
  display:none;  
}

.tab > div:target {
  display:block;  
}

正如您在上面的代码中看到的，我有一个渲染函数，但我不知道该放入什么内容

Answer 1

使用系列提示

series: [
    {
        type: 'bar',

        tips: {
            trackMouse: true,
            width: 74,
            height: 38,
            renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
            }
        },
        style: {
            minGapWidth: 1,
            minBarWidth: 60,
            maxBarWidth: 70,
            opacity: 0.80
        },
        xField: 'meta_id',
        yField: [
            'viewed',
            'glances'
        ]
    }
]

如何将系列数据渲染到sencha图表中的标题

1 个答案: