股票图表-属性{cropThreshold:}无法正常工作

时间:2018-08-05 15:54:21

标签: highcharts

我用StockChart创建了一个图表,我试图扩大该系列的cropThreshold,但没有成功。 当我使用HighCharts实现时,它会按预期工作。 StockChart / HighChart的示例: -JSFiddle

(要查看两个实现之间的区别,只需将第4行更改为第5行)

代码:

$(function() {

 Highcharts.stockChart('container', {
 /*  Highcharts.chart({ */

        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'Project wise Budget Estimation'
        },
        navigation: {
          buttonOptions: {
            enabled: false
          }
        },
      navigator: {
        enabled: false
      },
      rangeSelector: {
        enabled: false
      },
        credits: {
            enabled: false
        },
        xAxis: {
            tickInterval: 15 * 60 * 1000,
          type: 'datetime',
          min: 1530385200000,
          max: 1530394200000
        },
        yAxis: {
            min: 0,
            opposite: false,
            tickColor: '#95989A',
            tickWidth: 1,
            tickLength: 10,
            visible: true,
            tickInterval: 60,
            title: {
                text: 'Amount Distribution'
            }
        },
        legend: {
            shadow: false
        },
        tooltip: {

        },
        plotOptions: {
            column: {
              stacking: 'normal',
              cropThreshold: 150
            }
        },
        series: [
         {
           name: 'targetName',
           showInLegend: true,
           data: [
           [1530385200000,500],[1530386100000,500],[1530387000000,500],[1530387900000,500],[1530388800000,500],[1530389700000,500],[1530390600000,400],[1530391500000,450],[1530392400000,550],[1530393300000,500],[1530394200000,650],[1530395100000,500],[1530396000000,500],[1530396900000,550],[1530397800000,500],[1530398700000,500],[1530399600000,700],[1530400500000,650],[1530401400000,800],[1530402300000,500],[1530403200000,500],[1530404100000,300],[1530405000000,250],[1530405900000,200],[1530406800000,350],[1530407700000,150],[1530408600000,770],[1530409500000,800],[1530410400000,500],[1530411300000,500],[1530412200000,500],[1530413100000,500],[1530414000000,500],[1530414900000,500],[1530415800000,500],[1530416700000,500],[1530417600000,500],[1530418500000,500],[1530419400000,500],[1530420300000,500],[1530421200000,500],[1530422100000,500],[1530423000000,500],[1530423900000,500],[1530424800000,500]
           ],
           zIndex: 2
         },
         {
           name: 'deviationName',
           showInLegend: true,
           data: [
           [1530385200000,450,550],[1530386100000,450,550],[1530387000000,450,550],[1530387900000,450,550],[1530388800000,450,550],[1530389700000,450,550],[1530390600000,360,440],[1530391500000,405,495],[1530392400000,495,605],[1530393300000,450,550],[1530394200000,585,715],[1530395100000,450,550],[1530396000000,450,550],[1530396900000,495,605],[1530397800000,450,550],[1530398700000,450,550],[1530399600000,630,770],[1530400500000,585,715],[1530401400000,720,880],[1530402300000,450,550],[1530403200000,450,550],[1530404100000,270,330],[1530405000000,225,275],[1530405900000,180,220],[1530406800000,315,385],[1530407700000,135,165],[1530408600000,693,847],[1530409500000,720,880],[1530410400000,450,550],[1530411300000,450,550],[1530412200000,450,550],[1530413100000,450,550],[1530414000000,450,550],[1530414900000,450,550],[1530415800000,450,550],[1530416700000,450,550],[1530417600000,450,550],[1530418500000,450,550],[1530419400000,450,550],[1530420300000,450,550],[1530421200000,450,550],[1530422100000,450,550],[1530423000000,450,550],[1530423900000,450,550]
           ],
           type: 'arearange',
           linkedTo: ':previous',
           zIndex: 0
         },
        {
          name: 'periodsName',
          showInLegend: false,
          type: 'column',
          cropThreshold: 150,
          zIndex: 1,
          pointInterval: 24 * 3600 * 1000,
          data: [
          {"x":1530385200000,"y":400,"colorIndex":55},{"x":1530386100000,"y":400,"colorIndex":55},{"x":1530387000000,"y":400,"colorIndex":55},{"x":1530387900000,"y":480,"colorIndex":56},{"x":1530388800000,"y":495,"colorIndex":56},{"x":1530389700000,"y":510,"colorIndex":56},{"x":1530390600000,"y":700,"colorIndex":57},{"x":1530391500000,"y":650,"colorIndex":57},{"x":1530392400000,"y":300,"colorIndex":55},{"x":1530393300000,"y":660,"colorIndex":57},{"x":1530394200000,"y":400,"colorIndex":55},{"x":1530395100000,"y":500,"colorIndex":56},{"x":1530396000000,"y":500,"colorIndex":56},{"x":1530396900000,"y":200,"colorIndex":55},{"x":1530397800000,"y":490,"colorIndex":56},{"x":1530398700000,"y":500,"colorIndex":56},{"x":1530399600000,"y":400,"colorIndex":55},{"x":1530400500000,"y":300,"colorIndex":55},{"x":1530401400000,"y":200,"colorIndex":55},{"x":1530402300000,"y":500,"colorIndex":56},{"x":1530403200000,"y":480,"colorIndex":56},{"x":1530404100000,"y":670,"colorIndex":57},{"x":1530405000000,"y":755,"colorIndex":57},{"x":1530405900000,"y":680,"colorIndex":57},{"x":1530406800000,"y":710,"colorIndex":57},{"x":1530407700000,"y":670,"colorIndex":57},{"x":1530408600000,"y":400,"colorIndex":55},{"x":1530409500000,"y":400,"colorIndex":55},{"x":1530410400000,"y":500,"colorIndex":56},{"x":1530411300000,"y":400,"colorIndex":55},{"x":1530412200000,"y":510,"colorIndex":56},{"x":1530413100000,"y":400,"colorIndex":55},{"x":1530414000000,"y":490,"colorIndex":56},{"x":1530414900000,"y":400,"colorIndex":55},{"x":1530415800000,"y":400,"colorIndex":55},{"x":1530416700000,"y":590,"colorIndex":57},{"x":1530417600000,"y":590,"colorIndex":57},{"x":1530418500000,"y":600,"colorIndex":57},{"x":1530419400000,"y":620,"colorIndex":57},{"x":1530420300000,"y":400,"colorIndex":55},{"x":1530421200000,"y":600,"colorIndex":57},{"x":1530422100000,"y":600,"colorIndex":57},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55}
          ]
          }, 
          {
            name: 'withinTarget',
            type: 'column',
            showInLegend: true,
            data: []
          }, 
          {
            name: 'belowTarget',
            type: 'column',
            showInLegend: true,
            data: []
          }, 
          {
            name: 'overTarget',
            type: 'column',
            showInLegend: true,
            data: []
          }],

        scrollbar: {
            enabled:true,
          /* liveRedraw: false, */
          barBackgroundColor: 'gray',
          barBorderRadius: 7,
          barBorderWidth: 0,
          buttonBackgroundColor: 'gray',
          buttonBorderWidth: 0,
          buttonArrowColor: 'yellow',
          buttonBorderRadius: 7,
          rifleColor: 'yellow',
          trackBackgroundColor: 'white',
          trackBorderWidth: 1,
          trackBorderColor: 'silver',
          trackBorderRadius: 7
        }
    });
});

1 个答案:

答案 0 :(得分:0)

此行为是由 dataGrouping 引起的,您可以将其禁用。还值得注意的是您的数据未排序。

    plotOptions: {
        series: {
            stacking: 'normal',
            cropThreshold: 150,
            dataGrouping: {
                enabled: false
            }
        }
    }

实时示例:http://jsfiddle.net/BlackLabel/2ma3yhv1/

API参考:https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.enabled