我有一个超过200个数据点的数据集，我怎么能总是显示第一个和最后一个数据点，而不管我的数据集的大小。请参阅此处的代码，注意宽度、高度和categoryAxis.renderer.minGridDistance保持原样。
"Jan-05"必须是第一个标签和"Sep-20"最后一个标签
线图
代码如下:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.legend = new am4charts.Legend()
chart.legend.position = 'top'
chart.legend.contentAlign = "center";
chart.legend.marginBottom = 10;
chart.legend.labels.template.truncate = false;
// Add data
chart.data = [
{category: "Jan-05", value: "100", benchmarkvalue: "100"},
{category: "Mar-05", value: "100", benchmarkvalue: "100"},
{category: "Apr-05", value: "99", benchmarkvalue: "100"},
{category: "May-05", value: "100", benchmarkvalue: "100"},
{category: "Jun-05", value: "100", benchmarkvalue: "101"},
{category: "Jul-05", value: "102", benchmarkvalue: "101"},
{category: "Aug-05", value: "103", benchmarkvalue: "101"},
{category: "Sep-05", value: "106", benchmarkvalue: "104"},
{category: "Oct-05", value: "103", benchmarkvalue: "104"},
{category: "Nov-05", value: "105", benchmarkvalue: "104"},
{category: "Dec-05", value: "106", benchmarkvalue: "106"},
{category: "Jan-06", value: "110", benchmarkvalue: "106"},
{category: "Feb-06", value: "110", benchmarkvalue: "106"},
{category: "Mar-06", value: "111", benchmarkvalue: "110"},
{category: "Apr-06", value: "114", benchmarkvalue: "110"},
{category: "May-06", value: "112", benchmarkvalue: "110"},
{category: "Jun-06", value: "111", benchmarkvalue: "109"},
{category: "Jul-06", value: "111", benchmarkvalue: "109"},
{category: "Aug-06", value: "112", benchmarkvalue: "109"},
{category: "Sep-06", value: "114", benchmarkvalue: "112"},
{category: "Oct-06", value: "117", benchmarkvalue: "112"},
{category: "Nov-06", value: "119", benchmarkvalue: "112"},
{category: "Dec-06", value: "121", benchmarkvalue: "118"},
{category: "Jan-07", value: "121", benchmarkvalue: "118"},
{category: "Feb-07", value: "124", benchmarkvalue: "118"},
{category: "Mar-07", value: "123", benchmarkvalue: "120"},
{category: "Apr-07", value: "127", benchmarkvalue: "120"},
{category: "May-07", value: "128", benchmarkvalue: "120"},
{category: "Jun-07", value: "128", benchmarkvalue: "125"},
{category: "Jul-07", value: "127", benchmarkvalue: "125"},
{category: "Aug-07", value: "127", benchmarkvalue: "125"},
{category: "Sep-07", value: "132", benchmarkvalue: "128"},
{category: "Oct-07", value: "135", benchmarkvalue: "128"},
{category: "Nov-07", value: "131", benchmarkvalue: "128"},
{category: "Dec-07", value: "132", benchmarkvalue: "128"},
{category: "Jan-08", value: "125", benchmarkvalue: "128"},
{category: "Feb-08", value: "127", benchmarkvalue: "128"},
{category: "Mar-08", value: "127", benchmarkvalue: "122"},
{category: "Apr-08", value: "131", benchmarkvalue: "122"},
{category: "May-08", value: "131", benchmarkvalue: "122"},
{category: "Jun-08", value: "124", benchmarkvalue: "121"},
{category: "Jul-08", value: "122", benchmarkvalue: "121"},
{category: "Aug-08", value: "119", benchmarkvalue: "121"},
{category: "Sep-08", value: "109", benchmarkvalue: "108"},
{category: "Oct-08", value: "90", benchmarkvalue: "108"},
{category: "Nov-08", value: "88", benchmarkvalue: "108"},
{category: "Dec-08", value: "97", benchmarkvalue: "94"},
{category: "Jan-09", value: "93", benchmarkvalue: "94"},
{category: "Feb-09", value: "89", benchmarkvalue: "94"},
{category: "Mar-09", value: "92", benchmarkvalue: "89"},
{category: "Apr-09", value: "97", benchmarkvalue: "89"},
{category: "May-09", value: "104", benchmarkvalue: "89"},
{category: "Jun-09", value: "106", benchmarkvalue: "100"},
{category: "Jul-09", value: "111", benchmarkvalue: "100"},
{category: "Aug-09", value: "116", benchmarkvalue: "100"},
{category: "Sep-09", value: "119", benchmarkvalue: "110"},
{category: "Oct-09", value: "121", benchmarkvalue: "110"},
{category: "Nov-09", value: "122", benchmarkvalue: "110"},
{category: "Dec-09", value: "123", benchmarkvalue: "112"},
{category: "Jan-10", value: "122", benchmarkvalue: "112"},
{category: "Feb-10", value: "120", benchmarkvalue: "112"},
{category: "Mar-10", value: "125", benchmarkvalue: "114"},
{category: "Apr-10", value: "126", benchmarkvalue: "114"},
{category: "May-10", value: "118", benchmarkvalue: "114"},
{category: "Jun-10", value: "116", benchmarkvalue: "107"},
{category: "Jul-10", value: "122", benchmarkvalue: "107"},
{category: "Aug-10", value: "121", benchmarkvalue: "107"},
{category: "Sep-10", value: "128", benchmarkvalue: "116"},
{category: "Oct-10", value: "131", benchmarkvalue: "116"},
{category: "Nov-10", value: "129", benchmarkvalue: "116"},
{category: "Dec-10", value: "134", benchmarkvalue: "120"},
{category: "Jan-11", value: "135", benchmarkvalue: "120"},
{category: "Feb-11", value: "138", benchmarkvalue: "120"},
{category: "Mar-11", value: "138", benchmarkvalue: "123"},
{category: "Apr-11", value: "142", benchmarkvalue: "123"},
{category: "May-11", value: "138", benchmarkvalue: "123"},
{category: "Jun-11", value: "137", benchmarkvalue: "123"},
{category: "Jul-11", value: "139", benchmarkvalue: "122"},
{category: "Aug-11", value: "128", benchmarkvalue: "122"},
{category: "Sep-11", value: "121", benchmarkvalue: "111"},
{category: "Oct-11", value: "132", benchmarkvalue: "111"},
{category: "Nov-11", value: "123", benchmarkvalue: "111"},
{category: "Dec-11", value: "125", benchmarkvalue: "113"},
{category: "Jan-12", value: "132", benchmarkvalue: "113"},
{category: "Feb-12", value: "135", benchmarkvalue: "113"},
{category: "Mar-12", value: "134", benchmarkvalue: "120"},
{category: "Apr-12", value: "133", benchmarkvalue: "120"},
{category: "May-12", value: "125", benchmarkvalue: "120"},
{category: "Jun-12", value: "128", benchmarkvalue: "115"},
{category: "Jul-12", value: "128", benchmarkvalue: "115"},
{category: "Aug-12", value: "131", benchmarkvalue: "115"},
{category: "Sep-12", value: "134", benchmarkvalue: "120"},
{category: "Oct-12", value: "133", benchmarkvalue: "120"},
{category: "Nov-12", value: "133", benchmarkvalue: "120"},
{category: "Dec-12", value: "137", benchmarkvalue: "122"},
{category: "Jan-13", value: "142", benchmarkvalue: "122"},
{category: "Feb-13", value: "141", benchmarkvalue: "122"},
{category: "Mar-13", value: "144", benchmarkvalue: "126"},
{category: "Apr-13", value: "146", benchmarkvalue: "126"},
{category: "May-13", value: "148", benchmarkvalue: "126"},
{category: "Jun-13", value: "143", benchmarkvalue: "124"},
{category: "Jul-13", value: "148", benchmarkvalue: "124"},
{category: "Aug-13", value: "148", benchmarkvalue: "124"},
{category: "Sep-13", value: "151", benchmarkvalue: "129"},
{category: "Oct-13", value: "156", benchmarkvalue: "129"},
{category: "Nov-13", value: "155", benchmarkvalue: "129"},
{category: "Dec-13", value: "159", benchmarkvalue: "133"},
{category: "Jan-14", value: "157", benchmarkvalue: "133"},
{category: "Feb-14", value: "160", benchmarkvalue: "133"},
{category: "Mar-14", value: "160", benchmarkvalue: "133"},
{category: "Apr-14", value: "159", benchmarkvalue: "133"},
{category: "May-14", value: "161", benchmarkvalue: "133"},
{category: "Jun-14", value: "165", benchmarkvalue: "137"},
{category: "Jul-14", value: "165", benchmarkvalue: "137"},
{category: "Aug-14", value: "164", benchmarkvalue: "137"},
{category: "Sep-14", value: "160", benchmarkvalue: "134"},
{category: "Oct-14", value: "157", benchmarkvalue: "135"},
{category: "Nov-14", value: "161", benchmarkvalue: "136"},
{category: "Dec-14", value: "160", benchmarkvalue: "135"},
{category: "Jan-15", value: "161", benchmarkvalue: "135"},
{category: "Feb-15", value: "164", benchmarkvalue: "138"},
{category: "Mar-15", value: "163", benchmarkvalue: "137"},
{category: "Apr-15", value: "166", benchmarkvalue: "139"},
{category: "May-15", value: "166", benchmarkvalue: "139"},
{category: "Jun-15", value: "161", benchmarkvalue: "136"},
{category: "Jul-15", value: "160", benchmarkvalue: "137"},
{category: "Aug-15", value: "153", benchmarkvalue: "131"},
{category: "Sep-15", value: "148", benchmarkvalue: "128"},
{category: "Oct-15", value: "157", benchmarkvalue: "133"},
{category: "Nov-15", value: "156", benchmarkvalue: "132"},
{category: "Dec-15", value: "153", benchmarkvalue: "131"},
{category: "Jan-16", value: "144", benchmarkvalue: "126"},
{category: "Feb-16", value: "147", benchmarkvalue: "126"},
{category: "Mar-16", value: "154", benchmarkvalue: "131"},
{category: "Apr-16", value: "158", benchmarkvalue: "132"},
{category: "May-16", value: "156", benchmarkvalue: "132"},
{category: "Jun-16", value: "157", benchmarkvalue: "132"},
{category: "Jul-16", value: "161", benchmarkvalue: "135"},
{category: "Aug-16", value: "163", benchmarkvalue: "136"},
{category: "Sep-16", value: "164", benchmarkvalue: "136"},
{category: "Oct-16", value: "161", benchmarkvalue: "135"},
{category: "Nov-16", value: "160", benchmarkvalue: "134"},
{category: "Dec-16", value: "161", benchmarkvalue: "136"},
{category: "Jan-17", value: "166", benchmarkvalue: "137"},
{category: "Feb-17", value: "168", benchmarkvalue: "140"},
{category: "Mar-17", value: "169", benchmarkvalue: "140"},
{category: "Apr-17", value: "172", benchmarkvalue: "142"},
{category: "May-17", value: "174", benchmarkvalue: "144"},
{category: "Jun-17", value: "174", benchmarkvalue: "144"},
{category: "Jul-17", value: "178", benchmarkvalue: "146"},
{category: "Aug-17", value: "178", benchmarkvalue: "146"},
{category: "Sep-17", value: "181", benchmarkvalue: "147"},
{category: "Oct-17", value: "183", benchmarkvalue: "149"},
{category: "Nov-17", value: "184", benchmarkvalue: "150"},
{category: "Dec-17", value: "187", benchmarkvalue: "151"},
{category: "Jan-18", value: "195", benchmarkvalue: "155"},
{category: "Feb-18", value: "191", benchmarkvalue: "151"},
{category: "Mar-18", value: "186", benchmarkvalue: "150"},
{category: "Apr-18", value: "188", benchmarkvalue: "151"},
{category: "May-18", value: "190", benchmarkvalue: "151"},
{category: "Jun-18", value: "189", benchmarkvalue: "149"},
{category: "Jul-18", value: "192", benchmarkvalue: "152"},
{category: "Aug-18", value: "191", benchmarkvalue: "151"},
{category: "Sep-18", value: "190", benchmarkvalue: "151"},
{category: "Oct-18", value: "178", benchmarkvalue: "145"},
{category: "Nov-18", value: "177", benchmarkvalue: "146"},
{category: "Dec-18", value: "172", benchmarkvalue: "141"},
{category: "Jan-19", value: "179", benchmarkvalue: "147"},
{category: "Feb-19", value: "185", benchmarkvalue: "150"},
{category: "Mar-19", value: "185", benchmarkvalue: "151"},
{category: "Apr-19", value: "189", benchmarkvalue: "154"},
{category: "May-19", value: "183", benchmarkvalue: "150"},
{category: "Jun-19", value: "190", benchmarkvalue: "155"},
{category: "Jul-19", value: "192", benchmarkvalue: "156"},
{category: "Aug-19", value: "186", benchmarkvalue: "155"},
{category: "Sep-19", value: "187", benchmarkvalue: "156"},
{category: "Oct-19", value: "190", benchmarkvalue: "158"},
{category: "Nov-19", value: "191", benchmarkvalue: "159"},
{category: "Dec-19", value: "198", benchmarkvalue: "162"},
{category: "Jan-20", value: "196", benchmarkvalue: "162"},
{category: "Feb-20", value: "206", benchmarkvalue: "168"},
{category: "Mar-20", value: "168", benchmarkvalue: "152"},
{category: "Apr-20", value: "180", benchmarkvalue: "161"},
{category: "May-20", value: "188", benchmarkvalue: "165"},
{category: "Jun-20", value: "199", benchmarkvalue: "168"},
{category: "Jul-20", value: "208", benchmarkvalue: "173"},
{category: "Aug-20", value: "216", benchmarkvalue: "177"},
{category: "Sep-20", value: "213", benchmarkvalue: "174"},];
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = 80;
valueAxis.max = 220;
valueAxis.startLocation = 0.5;
valueAxis.strictMinMax = true;
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 1;
valueAxis.renderer.line.stroke = am4core.color("#000000");
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.startLocation = 0.5;
categoryAxis.renderer.minGridDistance = 40;
categoryAxis.renderer.labels.template.rotation = 270;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.line.strokeOpacity = 1;
categoryAxis.renderer.line.strokeWidth = 1;
categoryAxis.renderer.line.stroke = am4core.color("#000000");
const createSeries = (value, color, name) => {
const series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = value;
series.dataFields.categoryX = "category";
series.name = name;
series.fill = color;
series.stroke = color;
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.name = name
}
// Create series
createSeries("value", "blue", "main");
createSeries("benchmarkvalue", "black", "benchmark");
我认为你应该用DateAxis代替。并在数据中包含适当的日期对象。
从这里了解更多
chart.data = [
{ date: new Date(2021, 0, 5), category: "Jan-05", value: "100", benchmarkvalue: "100" },
{ date: new Date(2021, 2, 5), category: "Mar-05", value: "100", benchmarkvalue: "100" },
.
.
{ date: new Date(2021, 8, 20), category: "Sep-20", value: "213", benchmarkvalue: "174" },
];
使用DateAxis
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
这将允许你创建标签
categoryAxis.renderer.labels.template.disabled = true;
var rangeMin = categoryAxis.axisRanges.create();
rangeMin.date = new Date(2021, 0, 1);
rangeMin.label.text = chart.data[0].category;
var rangeMax = categoryAxis.axisRanges.create();
rangeMax.date = new Date(2021, 8, 20);
rangeMax.label.text = chart.data[chart.data.length - 1].category;