/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = generatechartData();
function generatechartData() {
var chartData = [];
chartData.push({
"date": new Date(2019, 0, 12),
"visits": 140,
"test": "hello-140-05/05/2019"
});
chartData.push({
"date": new Date(2019, 1, 12),
"visits": 150,
"test": "hello-140-06/05/2019"
});
chartData.push({
"date": new Date(2019, 2, 12),
"visits": 160,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 3, 12),
"visits": 170,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 4, 12),
"visits": 180,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 5, 12),
"visits": 190,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 6, 12),
"visits": 180,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 7, 12),
"visits": 160,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 8, 12),
"visits": 140,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 9, 12),
"visits": 120,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 10, 12),
"visits": 100,
"test": "hello-140-07/05/2019"
});
chartData.push({
"date": new Date(2019, 11, 12),
"visits": 80,
"test": "hello-140-07/05/2019"
});
return chartData;
}
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "visits";
series.dataFields.dateX = "date";
series.strokeWidth = 3;
series.tooltipText = "{valueY.value}";
series.fillOpacity = 0.1;
series.tooltipText = `[bold]Test[/]
----
Date: {date}
Visits: {visits}`;
// Create a range to change stroke for values below 0
var range = valueAxis.createSeriesRange(series);
range.value = 140;
range.endValue = 1000;
range.contents.stroke = chart.colors.getIndex(4);
range.contents.fill = range.contents.stroke;
range.contents.strokeOpacity = 0.7;
range.contents.fillOpacity = 0.1;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();
valueAxis.renderer.labels.template.adapter.add("text", function (text) {
return "$" + text;
});<style type="text/css">
#chartdiv {
width: 100%;
height: 300px;
}
</style><script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<div id="chartdiv">
</div>
我是 AM 图表 4 的新手，并使用下面的图表来显示具有范围的数字的增加和减少：
https://www.amcharts.com/demos/date-based-line-chart/
我的数据源中的所有值都是正数，因为阴影区域或填充覆盖了图表中的整个区域，而不是示例中的特定区域。
我的图表设置：
范围.值 = 100000;
范围.endValue = 1000;
我想知道这个图表只有在我们在图表数据集中有负数时才有效，或者它也可以使用正数来共享/填充示例中的区域。