Question

    /**
 * ---------------------------------------
 * 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/

我的数据源中的所有值都是正数，因为阴影区域或填充区域覆盖了图表中的整个区域，而不是示例中的特定区域。

我的图表设置：

range.value = 100000;

range.endValue = 1000;

我想知道，只有当我们在图表数据集中有负数时，该图表才可以工作，或者它也可以与正数一起工作以共享/填充该区域，如示例一。

Answer 1

如果您不想填充超出范围的序列，请不要在序列上设置fillOpacity：

series.fillOpacity = 0.1;

/**
 * ---------------------------------------
 * 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>

Answer 2

尝试：

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.baseValue = 140;

AM图4带有正数的其他负色问题的线

2 个答案: