Skip to content

散点图加折线图。双y轴。可以实现加载两个数据源吗。左边的y轴关联的是散点图,右边的y轴是关联折线图 #592

@wumingkai007

Description

@wumingkai007

image

这是需要实现的效果图。折线图的某个点的数据,是散点图的三种类型相加的总和。这种效果需要怎么实现,它们的x轴时间是一样的。只是折线图某个时间的数据,是散点图,三种类型的总和。研究了好久,都没有好的实现代码

var chart = new F2.Chart({
id: 'mountNode',
syncY: true,
syncY: false,
pixelRatio: window.devicePixelRatio
});

    data = [{
        "plate": "信托业务板块",
        "income": 4206.8784,
        "day": "2019-05-16",
        "total": 121354585
    },
        {
            "plate": "投资银行板块",
            "income": 2722.7124,
            "day": "2019-05-16",
            "total": 121354585
        },
        {
            "plate": "信托业务板块",
            "income": 1337.1485,
            "day": "2019-05-16",
            "total": 121354585
        },
        {
            "plate": "信托业务板块",
            "income": 598.2227,
            "day": "2019-05-17",
            "total":54813548
        },
        {
            "plate": "信托业务板块",
            "income": 2039.8446,
            "day": "2019-05-17",
            "total":54813548
        },
        {
            "plate": "信托业务板块",
            "income": 1643.4238,
            "day": "2019-05-17",
            "total":54813548
        },
        {
            "plate": "信托业务板块",
            "income": 212.406,
            "day": "2019-05-17",
            "total":54813548
        },
        {
            "plate": "投资银行板块",
            "income": 2034.0856,
            "day": "2019-05-17",
            "total":54813548
        },
        {
            "plate": "投资银行板块",
            "income": 126.2644,
            "day": "2019-05-17",
            "total":54813548
        },
        {
            "plate": "证券业务板块",
            "income": 1858.9715,
            "day": "2019-05-22",
            "total":546842184
        },
        {
            "plate": "信托业务板块",
            "income": 7889.3795,
            "day": "2019-05-22",
            "total":546842184
        },
        {
            "plate": "证券业务板块",
            "income": 7443.5393,
            "day": "2019-05-22",
            "total":546842184
        },
        {
            "plate": "信托业务板块",
            "income": 855.7508,
            "day": "2019-05-22",
            "total":546842184
        },
        {
            "plate": "信托业务板块",
            "income": 1904.9121,
            "day": "2019-05-22",
            "total":546842184
        },
        {
            "plate": "证券业务板块",
            "income": 7443.5393,
            "day": "2019-05-22",
            "total":546842184
        },
        {
            "plate": "信托业务板块",
            "income": 2714.2538,
            "day": "2019-05-24",
            "total":66665545
        },
        {
            "plate": "投资银行板块",
            "income": 5167.9757,
            "day": "2019-05-24",
            "total":66665545
        },
        {
            "plate": "信托业务板块",
            "income": 4912.2216,
            "day": "2019-05-24",
            "total":66665545
        }
    ];


    chart.source(data, {
        day: {
            values: ['2019-05-24', '2019-05-22',"2019-05-17"],
            tickCount: 3,
            type: 'timeCat',
            mask: 'MM.DD',
            range: [0.05, 0.95]

        },
        income: {
            tickCount: 5
        }
    });
    chart.axis('income', {
        label: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
                textCfg.textAlign = 'left';
            } else if (index === total - 1) {
                textCfg.textAlign = 'right';
            }
            return textCfg;
        }
    });
    chart.tooltip(false);

    chart.point().position('day*income').color('plate').style({
        fillOpacity: 0.65
    });

    chart.interaction('pan', {
        mode: 'x'
    });
    /*.interaction('pinch', {
        mode: 'x'
    })*/

    chart.line().position('day*total');
    chart.point().position('day*total').color('red');



    chart.render();

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions