Highchart: x轴随机添加额外日期

Highchart : xaxis Adding extra Dates randomly

本文关键字：日期 添加 随机 Highchart      更新时间：2023-09-26

我有两个堆叠的列图。

都包含非常相似的数据，列数相同。

所有位置

Location 3 jsfield

两者具有完全相同的初始化代码，数据是它们之间唯一的区别。

chart: { renderTo:'hcweeklySnapshotLoc_container', animation: { animation: true }, defaultSeriesType: 'column', height: 500, marginBottom: 140, zoomType: 'x' }, 
    credits: { enabled: false }, 
    plotOptions: { column: { dataLabels: { enabled: true }, stacking: 'normal' }, line: { lineWidth: 1, marker: { enabled: false, states: { hover: { enabled: true } } } }, series: { pointInterval: 7 }, spline: { lineWidth: 3, marker: { enabled: false, states: { hover: { enabled: true } } } } }, 
    title: { text: 'Location 3', x: -20 }, 
    tooltip: { formatter: function() { if(this.series.name == 'Target'|| this.series.name == 'Stretch' || this.series.name == 'Failure') { return '<b>'+ this.series.name +'</b><br/>' + Highcharts.dateFormat('%e %B %Y', this.x) +': <b>'+ this.y + '</b>' } else { return '<b>'+ this.series.name +'</b>' +'<br/>' + 'Week Ending :' + Highcharts.dateFormat('%e %B %Y', this.x) +': '+ this.y +'<br/>' + 'Total: '+ Math.round(this.point.stackTotal*Math.pow(10,2))/Math.pow(10,2);} } }, 
    xAxis: { dateTimeLabelFormats: { month: '%b %Y' }, minRange: 86400000, startOfWeek: 5, tickInterval: 604800000, tickmarkPlacement: 'on', title: { text: 'Week ending' }, type: 'datetime' }, 
    yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of People' } }

其他位置(位置1和位置2)也面临与所有位置图相同的问题。

我的问题是，所有位置图显示一个额外的日期刻度在结束，而位置3图不是。这是Highcharts中的一些bug，还是我的数据有问题。我使用MVC4/Razor使用Highchart生成高图。净

发生这种情况的原因是因为您的序列并不都是按升序排列的。你俩的星盘也是如此。"所有地点"看起来更糟糕的原因是，它对如何渲染图表的猜测不同。如果你把你的时间序列按时间顺序排列，你应该很好。

代码:

{
            data: [
                [Date.parse('05/31/2013 00:00:00'), 1],
                [Date.parse('03/15/2013 00:00:00'), 3],
                [Date.parse('05/03/2013 00:00:00'), 2],
                [Date.parse('04/26/2013 00:00:00'), 3],
                [Date.parse('03/29/2013 00:00:00'), 2],
                [Date.parse('04/05/2013 00:00:00'), 1],
                [Date.parse('03/22/2013 00:00:00'), 4],
                [Date.parse('04/19/2013 00:00:00'), 6],
                [Date.parse('05/17/2013 00:00:00'), 4],
                [Date.parse('04/12/2013 00:00:00'), 1],
                [Date.parse('05/24/2013 00:00:00'), 4],
                [Date.parse('05/10/2013 00:00:00'), 1]
            ],
            name: 'Loc3',
            type: 'column',
            color: '#003E69',
            lineWidth: 1,
            pointInterval: 7
        }

时间代码:

{
            data: [
                [Date.parse('03/15/2013 00:00:00'), 3],
                [Date.parse('03/22/2013 00:00:00'), 4],
                [Date.parse('03/29/2013 00:00:00'), 2],
                [Date.parse('04/05/2013 00:00:00'), 1],
                [Date.parse('04/12/2013 00:00:00'), 1],
                [Date.parse('04/19/2013 00:00:00'), 6],
                [Date.parse('04/26/2013 00:00:00'), 3],
                [Date.parse('05/03/2013 00:00:00'), 2],
                [Date.parse('05/10/2013 00:00:00'), 1],
                [Date.parse('05/17/2013 00:00:00'), 4],
                [Date.parse('05/24/2013 00:00:00'), 4],
                [Date.parse('05/31/2013 00:00:00'), 1]
            ],
            name: 'Loc3',
            type: 'column',
            color: '#003E69',
            lineWidth: 1,
            pointInterval: 7
        }

相关文章：