High-Chart X-axis показывает метку после определенных дней, независимо от того, что находится в категориях X-оси

Question

Это мой код для старшей диаграммы:

Highcharts.setOptions({
    time: {
        useUTC: false
    }
});

$('#container-chart').highcharts({
    chart: {
        type: 'line',
        alignTicks: false,
    },
    title: {
        text: "Title 1",
    },
    tooltip: {
        formatter: function() {
            return Highcharts.dateFormat('%b %e, %Y',new Date(this.x))+ '<br/>' + this.y;
        }
    },
    xAxis: {
        categories: [1391122800000,1393542000000,1396216800000,1398808800000,1401487200000,1404079200000,1406757600000,1409436000000,1412028000000,1414710000000,1417302000000,1419980400000,1422658800000,1425078000000,1427752800000,1430344800000,1433023200000,1435615200000,1438293600000,1440972000000,1443564000000,1446246000000,1448838000000,1451516400000,1454194800000,1456700400000,1459375200000,1461967200000,1464645600000,1467237600000,1469916000000,1472594400000,1475186400000,1477868400000,1480460400000,1483138800000,1485817200000,1488236400000,1490911200000,1493503200000,1496181600000,1498773600000,1501452000000,1504130400000,1506722400000,1509404400000,1511996400000,1514674800000,1517353200000,1519772400000,1522447200000,1525039200000,1527717600000,1530309600000,1532988000000,1535666400000,1538258400000,1540940400000],
        // tickInterval: (24 * 3600 * 1000 * 173),
        labels: {
            formatter: function () { 
                return Highcharts.dateFormat("%b %y", this.value);
            },
        }
    },
    yAxis: {
        title: { text: ''
        },
    },
    legend: {
        enable: true,
    },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: false,
                    allowOverlap: true,
                },
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        series: [{
            data: [0.57,0.41,0.51,0.35,0.16,0.16,0.05,0.19,0.27,0.57,0.45,0.59,0.49,0.77,0.56,0.25,0.3,0.28,0.27,0.33,0.45,0.62,0.62,0.46,0.46,0.45,0.68,0.18,0.22,0.28,0.29,0.41,0.34,0.59,0.67,0.69,0.65,0.57,0.73,-0.01,0.32,0.27,0.47,0.47,0.57,0.75,0.7,0.6,0.71,0.88,0.79,-0.11,0.22,0.15,0.07,0.09,0.09,0.09],
        }],
        exporting: {
            sourceWidth: 1500
        },

});

У меня есть данные за 58 дней для свойств категорий xAxis старшей диаграммы. Разница дат от данных за 1-й день до данных за 58-й день составляет 1734, то есть общее количество дней составляет 1734 дня. Теперь, скажем, я хочу показать только 10 меток на оси x, на одинаковом расстоянии, включая первые и последние данные, это означает, что интервал между метками будет 173 дня. Как я могу достичь этого интервала метки независимо от того, какой разрыв даты присутствует в категориях оси X?

Любая помощь?

Answer 1

Вы можете использовать функцию tickPositioner, но вы должны использовать временные метки как значения x, а не как категории:

xAxis: {
    tickPositioner: function() {
        var positions = [],
            interval = 24 * 3600 * 1000 * 173;

        for (var i = this.dataMin; i <= this.dataMax; i += interval) {
            positions.push(i);
        }

        return positions;
    },
    labels: {
        formatter: function() {
            return Highcharts.dateFormat("%b %y", this.value);
        },
    }
}

Живая демоверсия: http://jsfiddle.net/BlackLabel/npq3x2bc/

Справочник по API: https://api.highcharts.com/highcharts/xAxis.tickPositioner

Answer 2

Highcharts.setOptions({
    time: {
        useUTC: false
    }
});

$('#container-chart').highcharts({
    chart: {
        type: 'line',
        alignTicks: false,
    },
    title: {
        text: "Title 1",
    },
    tooltip: {
        formatter: function() {
            return Highcharts.dateFormat('%b %e, %Y',new Date(this.x))+ '<br/>' + this.y;
        }
    },
    xAxis: {
        categories: [1391122800000,1393542000000,1396216800000,1398808800000,1401487200000,1404079200000,1406757600000,1409436000000,1412028000000,1414710000000,1417302000000,1419980400000,1422658800000,1425078000000,1427752800000,1430344800000,1433023200000,1435615200000,1438293600000,1440972000000,1443564000000,1446246000000,1448838000000,1451516400000,1454194800000,1456700400000,1459375200000,1461967200000,1464645600000,1467237600000,1469916000000,1472594400000,1475186400000,1477868400000,1480460400000,1483138800000,1485817200000,1488236400000,1490911200000,1493503200000,1496181600000,1498773600000,1501452000000,1504130400000,1506722400000,1509404400000,1511996400000,1514674800000,1517353200000,1519772400000,1522447200000,1525039200000,1527717600000,1530309600000,1532988000000,1535666400000,1538258400000,1540940400000],
        // tickInterval: (24 * 3600 * 1000 * 173),
        labels: {
            formatter: function () { 
                return Highcharts.dateFormat("%b %y", this.value);
            },
        }
    },
    yAxis: {
        title: { text: ''
        },
         tickInterval:(maxValue/10),
            min: 0,
            max: maxValue,
    },
    legend: {
        enable: true,
    },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: false,
                    allowOverlap: true,
                },
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        series: [{
            data: [0.57,0.41,0.51,0.35,0.16,0.16,0.05,0.19,0.27,0.57,0.45,0.59,0.49,0.77,0.56,0.25,0.3,0.28,0.27,0.33,0.45,0.62,0.62,0.46,0.46,0.45,0.68,0.18,0.22,0.28,0.29,0.41,0.34,0.59,0.67,0.69,0.65,0.57,0.73,-0.01,0.32,0.27,0.47,0.47,0.57,0.75,0.7,0.6,0.71,0.88,0.79,-0.11,0.22,0.15,0.07,0.09,0.09,0.09],
        }],
        exporting: {
            sourceWidth: 1500
        },

});

здесь я добавил: tickInterval: (MaxValue / 10), мин: 0, max: maxValue,

это означает, что вам нужно получить максимальное значение, взять ближайшее значение, кратное 10, и использовать, я надеюсь, это поможет вам