如何在jQuery中使用行创建图表栏

Question

我想创建一些Chart Bar + line，但我不知道如何组合两个图表。

我想像这张照片吧

谢谢，希望有人可以帮我解决问题

Answer 1

这个https://jsfiddle.net/nu7cx100/

怎么样？

window.onload = function () {
    	var chart = new CanvasJS.Chart("chartContainer",{              
    		title:{
    			text: "Grafik Riwayat PKPT"
    		},
    		axisX:{
    			valueFormatString: "####",
    			interval: 1
    		},
    		axisY:[{
    			title: "Linear Scale",
    			lineColor: "#369EAD",
    			titleFontColor: "#369EAD",
    			labelFontColor: "#369EAD"
    		}],
    		axisY2:[{
    			title: "Linear Scale",
    			lineColor: "#7F6084",
    			titleFontColor: "#7F6084",
    			labelFontColor: "#7F6084"
    		}],
    
    	data: [
    	{
    		type: "column",
    		showInLegend: true,
    		//axisYIndex: 0, //Defaults to Zero
    		name: "ANNGGARAN",
    		xValueFormatString: "####",
    		dataPoints: [
    			{ x: 2006, y: 60 },
    			{ x: 2007, y: 20 },
    			{ x: 2008, y: 50 },
    			{ x: 2009, y: 70 },
    			{ x: 2010, y: 10 },
    			{ x: 2011, y: 50 },
    			{ x: 2012, y: 50 },
    			{ x: 2013, y: 20 },
    			{ x: 2014, y: 20 }
    		]
    	},
    	{
    		type: "line",
    		showInLegend: true,
    		axisYIndex: 1, //Defaults to Zero
    		name: "KEGIATAN",
    		xValueFormatString: "####",
    		dataPoints: [
    			{ x: 2006, y: 15 },
    			{ x: 2007, y: 3 },
    			{ x: 2008, y: 20 },
    			{ x: 2009, y: 10 },
    			{ x: 2010, y: 15 },
    			{ x: 2011, y: 10 },
    			{ x: 2012, y: 20 },
    			{ x: 2013, y: 20 },
    			{ x: 2014, y: 2 }
    		]
    	}
    	]
    	});
    
    	chart.render();
    }

    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>

它使用canvasjs 希望这有帮助