HighCharts：如何在样条图中显示yAxis标签的唯一文本

Question

在样条图中，我想显示不同的文本作为yAxis标签

目前，我只能为所有数据值呈现相同的文本

https://jsfiddle.net/thushara07/oty094Lb/27/

package="com.mannat.gamebox" >
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
                <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
                <meta-data
                    android:name="com.google.android.gms.ads.APPLICATION_ID"
                    android:value="ca-app-pub-1137704633163909~7931098472"/>

    </application>

</manifest>

预期结果：对于样条图中的y轴标签，显示不同的文本而不是od点。值

Answer 1

您可以尝试高图label format

尝试一下：

var labelsList = ["Very Low", "Low", "Medium", "High", "Very High"];
Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [1,2,3,4,5,6]
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function (e) {
              switch(true) {
                case (e.value <= 5): 
                  return labelsList[0];
                case (e.value <= 10): 
                return labelsList[1];
                case (e.value <= 15): 
                  return labelsList[2];
                case (e.value <= 20): 
                  return labelsList[3];
                case (e.value <= 30): 
                  return labelsList[4];
             }
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: 'Tokyo',
        marker: {
            symbol: 'square'
        },
        data: [ {
        		name:'test1',
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }, {
            y: 26.5,
            marker: {
                symbol: 'square'
            }
        },{
            y: '',
            marker: {
                symbol: 'square'
            }
        },{
            y: 5,
            marker: {
                symbol: 'square'
            }
        },{
            y: 5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }]

    }, {
        name: 'Mumbai',
        marker: {
            symbol: 'square'
        },
        data: [ {
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }, {
            y: 26.5,
            marker: {
                symbol: 'square'
            }
        },{
            y: '',
            marker: {
                symbol: 'square'
            }
        },{
            y: 10,
            marker: {
                symbol: 'square'
            }
        },{
            y: 10,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }]

    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 2

您可以创建一些外部数据集并从函数中引用它：

var customLabels = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7'],
    label,
    counter = 0;

Highcharts.chart('container', {
    ...,
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function() {
                label = customLabels[counter];
                counter++;

                if (this.isLast) {
                    counter = 0;
                }

                return label;
            }
        }
    },
});

实时演示： https://jsfiddle.net/BlackLabel/7tdabr84/