首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Sencha Extjs中使用canvasjs库

如何在Sencha Extjs中使用canvasjs库
EN

Stack Overflow用户
提问于 2018-07-31 14:51:33
回答 1查看 114关注 0票数 0

我可以看到在Sencha ExtJS中可以使用d3图表和highcharts的插件。但是我找不到任何的canvasjs。有没有办法集成CanvasJS和Sencha Ext。

EN

回答 1

Stack Overflow用户

发布于 2018-08-04 03:57:29

CanvasJS只需要一个div来渲染他们的东西。

一种非常简单的方法可能是这样的:

代码语言:javascript
复制
Ext.create('Ext.Component', {
    layout: 'fit',
    width: 500,
    height: 500,
    renderTo: Ext.getBody(),
    border: 1,
    style: {
        backgroundColor: '#EEEEEE',
        borderStyle: 'solid',
        borderWidth: '1px'
    },
    listeners: {
        afterrender: function (cmp) {
            Ext.Loader.loadScript({
                url: 'https://canvasjs.com/assets/script/canvasjs.min.js',
                onLoad: function () {
                    console.log('ok, lets create the chart..');
                    cmp.createChart();
                },
                onError: function () {
                    console.log('canvasJS not loaded');
                }
            });
        }
    },
    createChart: function () {
        var htmlIdOfCmp = this.id;
        var chart = new CanvasJS.Chart(htmlIdOfCmp, {
            animationEnabled: true,
            theme: "light2",
            title: {
                text: "Simple Line Chart"
            },
            axisY: {
                includeZero: false
            },
            data: [{
                type: "line",
                dataPoints: [{
                    y: 450
                }, {
                    y: 414
                }, {
                    y: 520,
                    indexLabel: "highest",
                    markerColor: "red",
                    markerType: "triangle"
                }, {
                    y: 460
                }, {
                    y: 450
                }, {
                    y: 500
                }, {
                    y: 480
                }, {
                    y: 480
                }, {
                    y: 410,
                    indexLabel: "lowest",
                    markerColor: "DarkSlateGrey",
                    markerType: "cross"
                }, {
                    y: 500
                }, {
                    y: 480
                }, {
                    y: 510
                }]
            }]
        });
        chart.render();
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/2k59

这是ExtJS6的一个示例。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51607084

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档