Question

任何人都可以建议可以生成此类图表的Javascript图表库：Refer this Image

这里强调的是两个不同的领域：历史和时间表。每个都应该有不同的标题和背景颜色。基本上，如果每个区域都可以单独配置，那就太棒了。

我尝试使用Google Charts，但没有看到如何以干净的方式实现它。我可以用特定的布局创建两个图表，但我更喜欢这种方式更加动态和正确。

Answer 1

如果您正在寻找图表库来完成此任务，那么ZingChart就可以解决问题。通过将graphset对象中的“layout”设置为“x2”并创建两个单独的图表对象，您的图表可以并排设置，但仍可以单独操作。我在下面提供了一个演示供参考。运行它以查看图表。

您可以在网站上免费下载整个图书馆。如果您有任何疑问，我会加入团队并乐意为您提供帮助！您可以通过support@zingchart.com与我们联系。

var myChart = {
    "layout":"x2",
    "background-color":"#eee",
    "border-color":"#000",
    "border-width":2,
    "graphset":[
        {
            "type":"bar",
            "background-color":"#eee",
            "width":"60%",
            "x":0,
            "y":0,
            "title":{
                "text":"Chart 1",
                "text-align":"left",
                "font-color":"black",
                "background-color":"#ddd"
            },
            "scale-x":{
                "values":["2007","2008","2009","2010","2011","2012","2013","2014"],
                "label":{
                    "text":"History",
                    "offset-x":-125,
                    "padding-top":10
                },
                "tick":{
                    "visible":false
                    },
                "guide":{
                    "visible":false
                    }
            },
            "scale-y":{
                    "values":"0:12:2",
                    "guide":{
                        "line-style":"solid"
                        }
                },
            "plot":{
                "stacked":true
                },
            "plotarea":{
                "margin-right":0,
                "background-color":"#ddd"
            },
            "legend":{
                "shared":true,
                "visible":false
            },
            "series":[
            	{
		        "values":[3,5,5,5,8,6,4,3],
                "background-color":"#018BD3"
	            },
		        {
			    "values":[null,null,null,null,3,null,null,null],
                "background-color":"#F27D30"
	            },
		        {
		        "values":[],
                "background-color":"#F2D134"
		        },
	            {
		        "values":[null,null,null,null,null,2,null,2],
                "background-color":"#14AE13"
	            }
	        ]
        },
        {
            "type":"bar",
            "background-color":"#eee",
            "width":"40%",
            "x":"60%",
            "y":0,
             "title":{
                "text":"Chart 2",
                "text-align":"left",
                "font-color":"black",
                "background-color":"#ccc"
            },
            "scale-x":{
                "values":["2015","2016","2017"],
                "tick":{
                    "visible":false
                    },
                "guide":{
                    "visible":false
                    },
                "label":{
                    "text":"Schedule",
                    "offset-x":-25,
                    "padding-top":10
                }
            },
            "scale-y":{
                    "values":"0:12:2",
                    "line-color":"#777",
                    "tick":{
                        "visible":false
                        },
                    "item":{
                        "visible":false
                        },
                    "guide":{
                        "line-style":"solid"
                        }
                },
            "plot":{
                "stacked":true
                },
            "plotarea":{
                "margin-left":0,
                "margin-right":"50%",
                "background-color":"#ccc"
                },
            "legend":{
                "shared":true
            },
            "series":[
                {
		        "values":[7,1,0],
                "background-color":"#018BD3"
	            },
		        {
			    "values":[],
                "background-color":"#F27D30"
	            },
		        {
		        "values":[3,6,1],
                "background-color":"#F2D134"
		        },
	            {
		        "values":[1,null,null],
                "background-color":"#14AE13"
	            }
	        ]
        }
    ]
};

  zingchart.render({
            id : "myChart",
            height : "300px",
            width : "100%",
            data : myChart
        });

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

Answer 2

您可以尝试使用d3Js - examples库。

可能的解决方案是您必须使用<div>标记单独定义两个图形。

为每个CSS值（针对颜色和您的特定需求）提供单独的CSS值，然后在单个分区下定义<div>。

首先尝试修改JsFiddle

Answer 3

您可以试试 LightningChart JS 库。我们有一个广泛的仪表板 API，允许您将多个独立和可自定义的图表分组到一个布局中，然后也可以动态调整大小。您应该查看我们针对此特定用例 Dashboard Example 的交互式示例。

完全披露：我是 LightningChart 的开发人员，我认为您可能会发现这非常有用。

带有多个＆＃34;图表区域的Javascript图表＆＃34;

3 个答案: