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

Question

所以我的想法是，在一周的所有日子里，我都会消耗燃料并重新加注燃料。我认为它是一个基本的范围柱形图（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>

我得到的图表是这样的：

如何得到图1中的图形？

Answer 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>

Answer 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>

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

canvasjs range column chart change bar color and width when it is below horizontal axis

javascript

html

charts

bar-chart

canvasjs