首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >带折线图的柱状图-组合图自定义

带折线图的柱状图-组合图自定义
EN

Stack Overflow用户
提问于 2018-05-31 17:38:23
回答 1查看 213关注 0票数 6

哪个JS库最适合做上述类型的图表?

我想把聚类柱状图和折线图结合起来,如上图所示。

我的要求是每一列都应该有一个低值和高值集

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-01 17:40:35

请使用highcharts来完成此操作。有关代码,请参阅JSFiddle

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "column"

        },
        plotOptions: {
            series: {
                pointWidth: 25
            },
            line: {
                marker: {
                    type: 'dot'
                }
            }
        },
        title: {
            text: null
        },
        series: [{ "name": "india", "data": [{ y: 1, color: 'red' }, { y: 3, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 2, color: '#965129' }] },
        {"name": "usa", "data": [0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 1, color: '#965129' }] },
        { "name": "china", "data": [0, 0, 0, 0, 0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3.1, color: '#f1da37' }, { y: 1.9, color: '#965129' }]}, { "name": "target", "data": [3, 1, 3, 2, 2, 1, 1.9, 2.4, 2.8, 1.9, 2.9, 1.6], yAxis: 1, type: 'line' },
        { "name": "baseline", "data": [1.3, .1, 1.3, 0, 1.2, .5, 1.2, .2, .5, 1.2, 2.1, .2], yAxis: 1, type: 'line' }],
        xAxis: {
            categories: [{ "name": "india", "categories": ["june 2016", "july 2016", "august 2016", "september 2016"] }, { "name": "usa", "categories": ["may 2017", "june 2016", "july 2016", "august 2016"] }, { "name": "china", "categories": ["may 2017", "june 2017", "july 2017", "august 2017"] }]
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: '#89A54E'
                }
            }
        }, ,
            labels: {
                format: '',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
    });
});
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50621176

复制
相关文章

相似问题

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