CanvasJS

Question

如何从 CanvasJS 烛台图中删除空洞（如周末等）？

该图在周末等处留下一个大空洞，导致股市休市。

我查看了文档和 google，但我唯一发现的是这个 post 从 2015 年开始说它不可能。 https://canvasjs.com/forums/topic/hiding-nullempty-y-columns/ '

但是 CanvasJS 有一个内置选项来显示烛台。

我是不是漏掉了什么？

Answer 1

无法跳过周末和节假日，因为轴在整个日期范围内呈线性行为。

如果您只想显示工作日，那么最好使用 "label" 而不是 "x"。但它要求您在分配之前将 date/time 格式化为所需的字符串格式。您可以使用 formatDate() to do the same. Here is a page on label.

function skipWeekend(dps) {
   // Skip the weekends
   return dps.x.getDay() !== 6 && dps.x.getDay() !== 0;
}

也请看看这个jsFiddle。

Answer 2

需要将 "x" 元素更改为 "label"

var chart = new CanvasJS.Chart("chartContainer",
{
    title:{
        text: "Skipping Weekends in Candlestick Chart using Labels"
    },
    zoomEnabled: true,
    axisY: {
        includeZero:false,
        title: "Prices",
        prefix: "$ "
    },
    axisX: {
      interval:1,          
      labelAngle: -45,           
    },
    data: [
    {
        type: "candlestick",
        dataPoints: [
            {label: CanvasJS.formatDate(new Date(2012,01,01), "DDD DD MMM"),y:[5198, 5629, 5159, 5385]},
    {label: CanvasJS.formatDate(new Date(2012,01,02), "DDD DD MMM"),y:[5366, 5499, 5135, 5295]},
    {label: CanvasJS.formatDate(new Date(2012,01,03), "DDD DD MMM"),y:[5296, 5378, 5154, 5248]},

    {label: CanvasJS.formatDate(new Date(2012,01,06), "DDD DD MMM"),y:[5283, 5348, 5032, 5229]},
    {label: CanvasJS.formatDate(new Date(2012,01,07), "DDD DD MMM"),y:[5220, 5448, 5164, 5258]},
    {label: CanvasJS.formatDate(new Date(2012,01,08), "DDD DD MMM"),y:[5276, 5735, 5215, 5703]},
    {label: CanvasJS.formatDate(new Date(2012,01,09), "DDD DD MMM"),y:[5704, 5815, 4888, 5619]},
    {label: CanvasJS.formatDate(new Date(2012,01,10), "DDD DD MMM"),y:[5609, 5885, 5548, 5879]},

    {label: CanvasJS.formatDate(new Date(2012,01,13), "DDD DD MMM"),y:[6040, 6052, 5671, 5693]},
    {label: CanvasJS.formatDate(new Date(2012,01,14), "DDD DD MMM"),y:[5702, 5971, 5604, 5682]},
    {label: CanvasJS.formatDate(new Date(2012,01,15), "DDD DD MMM"),y:[5697, 5962, 5477, 5930]},
    {label: CanvasJS.formatDate(new Date(2012,01,16), "DDD DD MMM"),y:[5911, 6229, 5910, 5985]},
    {label: CanvasJS.formatDate(new Date(2012,01,17), "DDD DD MMM"),y:[5997, 6011, 5566, 5842]},

    {label: CanvasJS.formatDate(new Date(2012,01,20), "DDD DD MMM"),y:[5480, 6142, 5318, 5735]},
    {label: CanvasJS.formatDate(new Date(2012,01,21), "DDD DD MMM"),y:[5756, 6309, 5700, 6299]},
    {label: CanvasJS.formatDate(new Date(2012,01,22), "DDD DD MMM"),y:[6289, 6342, 5972, 6176]},
    {label: CanvasJS.formatDate(new Date(2012,01,23), "DDD DD MMM"),y:[6171, 6415, 6129, 6304]}
        ]
    }
    ]
});
chart.render();

完整示例： example

CanvasJS - 从烛台图中删除空洞/周末等

CanvasJS - Removed empty holes / weekends etc from candlesticks graph

javascript