canvasjs范围柱形图在低于水平轴时更改条形颜色和宽度答案

【问题标题】：canvasjs range column chart change bar color and width when it is below horizontal axiscanvasjs范围柱形图在低于水平轴时更改条形颜色和宽度
【发布时间】：2018-02-14 11:41:39
【问题描述】：

因此，我的想法是在一周的所有日子里，我都会消耗燃料并重新填充燃料。我认为它是一个基本的范围柱形图（canvas js），但是当条形图低于水平轴时，颜色和宽度必须改变。

我的意思是我想要这样的图表

我使用 canvasjs 库尝试过这个

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    animationEnabled: true,
    title: {
        text: "Brent Crude Oil Price - 2016"
    },
    axisY: {
        title: "Price(USD/bbl)",
        includeZero: false
    },
    data: [{
        color: "#98fb98",
        type: "rangeColumn",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM YYYY",
        toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
        dataPoints: [       
            { x: new Date(2016, 0), y: [0, 38.99] },
            { x: new Date(2016, 1), y: [0, 37.00] },
            { x: new Date(2016, 2), y: [0, 42.54] },
            { x: new Date(2016, 3), y: [0, 48.50] },
            { x: new Date(2016, 4), y: [0, 50.51] },
            { x: new Date(2016, 5), y: [0, 52.86] },
            { x: new Date(2016, 6), y: [0, 50.75] },
            { x: new Date(2016, 7), y: [0, 51.22] },
            { x: new Date(2016, 8), y: [0, 50.14] },
            { x: new Date(2016, 9), y: [0, 53.73] },
            { x: new Date(2016, 10), y: [0, 50.49] },
            { x: new Date(2016, 11), y: [0, 57.89] }
        ]
    },
 {
        color: "#ffb6c1",
        type: "rangeColumn",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM YYYY",
        toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
        dataPoints: [       
            { x: new Date(2016, 0), y: [-27.10, 0] },
            { x: new Date(2016, 1), y: [-29.92, 0] },
            { x: new Date(2016, 2), y: [-35.95, 0] },
            { x: new Date(2016, 3), y: [-37.27, 0] },
            { x: new Date(2016, 4), y: [-43.33, 0] },
            { x: new Date(2016, 5), y: [-46.69, 0] },
            { x: new Date(2016, 6), y: [-41.80, 0] },
            { x: new Date(2016, 7), y: [-41.51, 0] },
            { x: new Date(2016, 8), y: [-45.09, 0] },
            { x: new Date(2016, 9), y: [-47.98, 0] },
            { x: new Date(2016, 10), y: [-43.57, 0] },
            { x: new Date(2016, 11), y: [-51.51, 0] }
        ]
    }          
          ]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

我得到的图表是这样的：

如何获得第一张图片中的图表？

【问题讨论】：

标签： javascript html charts bar-chart canvasjs

【解决方案1】：

您可以使用柱形图和范围柱形图的组合。

var chart = new CanvasJS.Chart("chartContainer", {        
	data: [
	{
		color: "#98fb98",
		type: "column",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}: {y}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: 38.99 },
			{ x: new Date(2016, 1), y: 37.00 },
			{ x: new Date(2016, 2), y: 42.54 },
			{ x: new Date(2016, 3), y: 48.50 },
			{ x: new Date(2016, 4), y: 50.51 },
			{ x: new Date(2016, 5), y: 52.86 },
			{ x: new Date(2016, 6), y: 50.75 },
			{ x: new Date(2016, 7), y: 51.22 },
			{ x: new Date(2016, 8), y: 50.14 },
			{ x: new Date(2016, 9), y: 53.73 },
			{ x: new Date(2016, 10), y: 50.49 },
			{ x: new Date(2016, 11), y: 57.89 }
		]
	},
	{
		color: "#ffb6c1",
		type: "rangeColumn",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}: {y[0]}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: [-27.10, 0] },
			{ x: new Date(2016, 1), y: [-29.92, 0] },
			{ x: new Date(2016, 2), y: [-35.95, 0] },
			{ x: new Date(2016, 3), y: [-37.27, 0] },
			{ x: new Date(2016, 4), y: [-43.33, 0] },
			{ x: new Date(2016, 5), y: [-46.69, 0] },
			{ x: new Date(2016, 6), y: [-41.80, 0] },
			{ x: new Date(2016, 7), y: [-41.51, 0] },
			{ x: new Date(2016, 8), y: [-45.09, 0] },
			{ x: new Date(2016, 9), y: [-47.98, 0] },
			{ x: new Date(2016, 10), y: [-43.57, 0] },
			{ x: new Date(2016, 11), y: [-51.51, 0] }
		]
	} 				
	]
});

chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

【讨论】：

嗨..感谢您的回复..但我也想改变宽度和颜色。我怎样才能做到这一点？
您可以通过设置 dataPointWidth 属性（canvasjs.com/docs/charts/chart-options/datapoint-width）来改变列的宽度。
我试过了。我在设置颜色后添加了以下行。 chart.options.data[i].dataPoints[j].dataPointWidth = chart.options.data[i].dataPoints[j].y[0] == 0 ？ 30：20；但它没有工作
您不能有不同宽度的列，每列将具有相同的宽度。 dataPointWidth 属于图表级别，chart.options.dataPointWidth = 30;。但是，您可以将 rangeColumn 移动到第一个系列，将 column 移动到第二个系列，这使得 rangeColumn 系列宽度更小。

【解决方案2】：

您可以使用单个数据系列范围柱形图以及为每个数据点设置颜色。

var chart = new CanvasJS.Chart("chartContainer", {        
data: [{
		type: "rangeColumn",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: [0, 38.99] },
			{ x: new Date(2016, 1), y: [0, 37.00] },
			{ x: new Date(2016, 2), y: [0, 42.54] },
			{ x: new Date(2016, 3), y: [0, 48.50] },
			{ x: new Date(2016, 4), y: [0, 50.51] },
			{ x: new Date(2016, 5), y: [0, 52.86] },
			{ x: new Date(2016, 6), y: [0, 50.75] },
			{ x: new Date(2016, 7), y: [0, 51.22] },
			{ x: new Date(2016, 8), y: [0, 50.14] },
			{ x: new Date(2016, 9), y: [0, 53.73] },
			{ x: new Date(2016, 10), y: [0, 50.49] },
			{ x: new Date(2016, 11), y: [0, 57.89] },
			//Second Set
			{ x: new Date(2016, 0), y: [-27.10, 0] },
			{ x: new Date(2016, 1), y: [-29.92, 0] },
			{ x: new Date(2016, 2), y: [-35.95, 0] },
			{ x: new Date(2016, 3), y: [-37.27, 0] },
			{ x: new Date(2016, 4), y: [-43.33, 0] },
			{ x: new Date(2016, 5), y: [-46.69, 0] },
			{ x: new Date(2016, 6), y: [-41.80, 0] },
			{ x: new Date(2016, 7), y: [-41.51, 0] },
			{ x: new Date(2016, 8), y: [-45.09, 0] },
			{ x: new Date(2016, 9), y: [-47.98, 0] },
			{ x: new Date(2016, 10), y: [-43.57, 0] },
			{ x: new Date(2016, 11), y: [-51.51, 0] }
	]
	}]
});

addColor(chart);
chart.render();

function addColor(chart){
	for(var i = 0; i < chart.options.data.length; i++){
		for(var j = 0; j < chart.options.data[i].dataPoints.length; j++){
			chart.options.data[i].dataPoints[j].color = chart.options.data[i].dataPoints[j].y[0] == 0 ? "#ffb6c1" : "#98fb98";
		}
	}
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

【讨论】：

嗨..感谢您的回复..但我也想改变宽度和颜色。我怎样才能做到这一点？