如何绘制区域类型的图表? [英] How to plot area type highchart?

问题描述

这是

解决方案

1. 将 yAxis.opposite 设置为 true .

2. 再添加两个系列，并使用 tickPositioner 将最后的值显示为标签.

     yAxis:{相反:是的，showFirstLabel:否，showLastLabel:否，tickPositioner:function(){var prevTickPos = this.tickPositions，tickPositions = [prevTickPos [0]，prevTickPos [prevTickPos.length-1]]，系列= this.chart.series;series.forEach(function(s){tickPositions.push(s.processedYData [s.processedYData.length-1]);});tickPositions.sort(function(a，b){返回a-b;});返回tickPositions;}，...} 

---

实时演示: https://jsfiddle.net/BlackLabel/gk1t6cp2/

API引用: https://api.highcharts.com/highcharts/yAxis.opposite

Here is the jsfiddle Code reproduction,

I am using Highcharts to plot an area graph, how do I do the below ?

1. I need to move the y-axis labels to the right
2. Plot Area chart of 3 colors ['#762232', '#EFCA32', '#007788'] with their respective values.

Expected Output

解决方案

1. Set yAxis.opposite to true.

2. Add two more series and use tickPositioner to show thier last values as labels.

    yAxis: {
        opposite: true,
        showFirstLabel: false,
        showLastLabel: false,
        tickPositioner: function() {
            var prevTickPos = this.tickPositions,
                tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
                series = this.chart.series;
   
            series.forEach(function(s) {
                tickPositions.push(s.processedYData[s.processedYData.length - 1]);
            });
   
            tickPositions.sort(function(a, b) {
                return a - b;
            });
   
            return tickPositions;
        },
        ...
    }
   

---

Live demo: https://jsfiddle.net/BlackLabel/gk1t6cp2/

API Refernce: https://api.highcharts.com/highcharts/yAxis.opposite

这篇关于如何绘制区域类型的图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！