带线条的柱形图 - 组合图自定义

Question

哪个JS库做以上类型的图表最好？

我想把簇状柱形图和折线图结合起来，如上图所示。

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

Answer 1

请为此使用 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
        }],
    });
});

带线条的柱形图 - 组合图自定义

Column Chart with lines - Combo chart customization

javascript

linechart

column-chart

jscharts