Fatal编程技术网
  • javascript/
  • Javascript canvasjs范围柱形图在水平轴下方时更改条形图的颜色和宽度

Javascript canvasjs范围柱形图在水平轴下方时更改条形图的颜色和宽度

javascript html charts

Javascript canvasjs范围柱形图在水平轴下方时更改条形图的颜色和宽度,javascript,html,charts,bar-chart,canvasjs,Javascript,Html,Charts,Bar Chart,Canvasjs,因此，我的想法是，在一周的所有日子里，我都会消耗燃油并重新加注燃油。我认为它是一个基本的范围柱形图（canvas js），但当条形图位于水平轴下方时，颜色和宽度必须改变 我的意思是我想要一个这样的图表 我使用canvasjs库尝试了这个 <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("char

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


window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
主题：“light2”、“light1”、“light2”、“dark1”、“dark2”
animationEnabled：没错，
标题：{
正文：“布伦特原油价格——2016年”
},
axisY：{
标题：“价格（美元/桶）”，
包括：错
},
数据：[{
颜色：“98fb98”，
键入：“rangeColumn”，
yValueFormatString:“$#，##0.00”，
xValueFormatString:“MMM YYYY”，
toolTipContent:“{x}
高：{y[0]}
低：{y[1]}”，
数据点：[
{x:新日期（2016，0），y:[0，38.99]}，
{x:新日期（2016年1月1日），y:[0,37.00]}，
{x:新日期（2016年2月2日），y:[0,42.54]}，
{x:新日期（2016年3月3日），y:[0,48.50]}，
{x:新日期（2016年4月），y:[0,50.51]}，
{x:新日期（2016年5月5日），y:[052.86]}，
{x:新日期（2016年6月6日），y:[0,50.75]}，
{x:新日期（2016年7月7日），y:[0,51.22]}，
{x:新日期（2016年8月8日），y:[0,50.14]}，
{x:新日期（2016年9月9日），y:[0,53.73]}，
{x:新日期（2016年10月10日），y:[0,50.49]}，
{x:新日期（2016年11月11日），y:[0,57.89]}
]
},
{
颜色：“ffb6c1”，
键入：“rangeColumn”，
yValueFormatString:“$#，##0.00”，
xValueFormatString:“MMM YYYY”，
toolTipContent:“{x}
高：{y[0]}
低：{y[1]}”，
数据点：[
{x:新日期（2016，0），y:[-27.10，0]}，
{x:新日期（2016年1月1日），y:[-29.92,0]}，
{x:新日期（2016年2月），y:[-35.95,0]}，
{x:新日期（2016年3月），y:[-37.27,0]}，
{x:新日期（2016年4月），y:[-43.33,0]}，
{x:新日期（2016年5月5日），y:[-46.69,0]}，
{x:新日期（2016年6月6日），y:[-41.80,0]}，
{x:新日期（2016年7月），y:[-41.51,0]}，
{x:新日期（2016年8月8日），y:[-45.09,0]}，
{x:新日期（2016年9月9日），y:[-47.98,0]}，
{x:新日期（2016年10月），y:[-43.57,0]}，
{x:新日期（2016年11月），y:[-51.51,0]}
]
}          
]
});
chart.render（）；
}
我得到的图表是：

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

您可以使用列图和范围列图的组合

var chart=newcanvasjs.chart（“chartContainer”），{
数据：[
{
颜色：“98fb98”，
键入：“列”，
yValueFormatString:“$#，##0.00”，
xValueFormatString:“MMM YYYY”，
toolTipContent:“{x}:{y}”，
数据点：[
{x:新日期（2016，0），y:38.99}，
{x:新日期（2016年1月1日），y:37.00}，
{x:新日期（2016年2月），y:42.54}，
{x:新日期（2016年3月），y:48.50}，
{x:新日期（2016年4月），y:50.51}，
{x:新日期（2016年5月5日），y:52.86}，
{x:新日期（2016年6月6日），y:50.75}，
{x:新日期（2016年7月），y:51.22}，
{x:新日期（2016年8月8日），y:50.14}，
{x:新日期（2016年9月9日），y:53.73}，
{x:新日期（2016年10月），y:50.49}，
{x:新日期（2016年11月），y:57.89}
]
},
{
颜色：“ffb6c1”，
键入：“rangeColumn”，
yValueFormatString:“$#，##0.00”，
xValueFormatString:“MMM YYYY”，
toolTipContent:“{x}:{y[0]}”，
数据点：[
{x:新日期（2016，0），y:[-27.10，0]}，
{x:新日期（2016年1月1日），y:[-29.92,0]}，
{x:新日期（2016年2月），y:[-35.95,0]}，
{x:新日期（2016年3月），y:[-37.27,0]}，
{x:新日期（2016年4月），y:[-43.33,0]}，
{x:新日期（2016年5月5日），y:[-46.69,0]}，
{x:新日期（2016年6月6日），y:[-41.80,0]}，
{x:新日期（2016年7月），y:[-41.51,0]}，
{x:新日期（2016年8月8日），y:[-45.09,0]}，
{x:新日期（2016年9月9日），y:[-47.98,0]}，
{x:新日期（2016年10月），y:[-43.57,0]}，
{x:新日期（2016年11月），y:[-51.51,0]}
]
} 				
]
});
chart.render（）

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



var chart=newcanvasjs.chart（“chartContainer”），{
数据：[
{
颜色：“98fb98”，
键入：“列”，
yValueFormatString:“$#，##0.00”，
xValueFormatString:“MMM YYYY”，
toolTipContent:“{x}:{y}”，
数据点：[
{x:新日期（2016，0），y:38.99}，
{x:新日期（2016年1月1日），y:37.00}，
{x:新日期（2016年2月），y:42.54}，
{x:新日期（2016年3月），y:48.50}，
{x:新日期（2016年4月），y:50.51}，
{x:新日期（2016年5月5日），y:52.86}，
{x:新日期（2016年6月6日），y:50.75}，
{x:新日期（2016年7月），y:51.22}，
{x:新日期（2016年8月8日），y:50.14}，
{x:新日期（2016年9月9日），y:53.73}，
{x:新日期（2016年10月），y:50.49}，
{x:新日期（2016年11月），y:57.89}
]
},
{
颜色：“ffb6c1”，
键入：“rangeColumn”，
yValueFormatString:“$#，##0.00”，
xValueFormatString:“MMM YYYY”，
toolTipContent:“{x}:{y[0]}”，
数据点：[
{x:新日期（2016，0），y:[-27.10，0]}，
{x:新日期（2016年1月1日），y:[-29.92,0]}，
{x:新日期（2016年2月），y:[-35.95,0]}，
{x:新日期（2016年3月），y:[-37.27,0]}，
{x:新日期（2016年4月），y:[-43.33,0]}，
{x:新日期（2016年5月5日），y:[-46.69,0]}，
{x:新日期（2016年6月6日），y:[-41.80,0]}，
{x:新日期（2016年7月），y:[-41.51,0]}，
{x:新日期（2016年8月8日），y:[-45.09,0]}，
{x:新日期（2016年9月9日），y:[-47.98,0]}，
{x:新日期（2016年10月），y:[-43.57,0]}，
{x:新日期（2016年11月），y:[-51.51,0]}
]
} 				
]
});
chart.render（）

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



var chart=newcanvasjs.chart（“chartContainer”），{
数据：[{
键入：“rangeColumn”，
yValueFormatString:“$###