소개

highcharts는 기본 구분 기호에 공백을 사용합니다. highcharts의 그래프에 커서를 맞추었을 때에 표시되는 수치에 자리수 단락을 넣는 곳에서 빠졌으므로, 이 기사를 썼습니다.

일반 표시

Graph.vue

<template>
    <div>
        <highcharts :options="graph"></highcharts>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Chart } from 'highcharts-vue';

    export type DataType = {
        graph: any;
    }

    @Component ({
        components: {
            highcharts: Chart 
        },
    })
    export default class Graph extends Vue {
        data (): DataType {
            return {
                graph: {
                    title: {
                        text: 'Xperiaの値段(au)'
                    },
                    xAxis: {
                        categories: ['Xperia 1', 'Xperia 5'],
                        crosshair: true
                    },
                    yAxis: {
                        title: false,
                        labels: {
                            format: '{value} 円'
                        },
                        opposite: false,
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '{series.name}：{point.y:,.0f} 円'
                    },
                    series: [{
                        name: '一括価格',
                        type: 'column',
                        data: [92880, 81400],
                        marker: {
                            enabled: true
                        },
                    }],
                }
            }
        }
    }
</script>

<style>
    div {
        width: 80%;
        height: auto;
        margin: 20px auto auto auto;
    }
</style>

이런 식으로 숫자 구분 기호가 공백으로 표시됩니다. Xperia 1의 가격을 92,880엔에서 92,880엔으로 표시하고 싶은 경우는 아래와 같이 합니다.

숫자 구분 기호로 표시

import Highcharts 및 Highcharts.setOptions를 추가합니다.

Graph.vue

import { Chart } from 'highcharts-vue';
+ import Highcharts from 'highcharts';
+ Highcharts.setOptions({
+   lang: {
+       thousandsSep: ','
+   }
+ });
export type DataType = {

Graph.vue

<template>
    <div>
        <highcharts :options="graph"></highcharts>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Chart } from 'highcharts-vue';
    import Highcharts from 'highcharts';
    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        }
    });

    export type DataType = {
        graph: any;
    }

    @Component ({
        components: {
            highcharts: Chart 
        },
    })
    export default class Graph extends Vue {
        data (): DataType {
            return {
                graph: {
                    title: {
                        text: 'Xperiaの値段(au)'
                    },
                    xAxis: {
                        categories: ['Xperia 1', 'Xperia 5'],
                        crosshair: true
                    },
                    yAxis: {
                        title: false,
                        labels: {
                            format: '{value} 円'
                        },
                        opposite: false,
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '{series.name}：{point.y:,.0f} 円'
                    },
                    series: [{
                        name: '一括価格',
                        type: 'column',
                        data: [92880, 81400],
                        marker: {
                            enabled: true
                        },
                    }],
                }
            }
        }
    }
</script>

<style>
    div {
        width: 80%;
        height: auto;
        margin: 20px auto auto auto;
    }
</style>

세 자리 구분 기호로 표시할 수 있습니다.

결론

맞추어 이쪽도 봐 주세요.
Vue (Vue-CLI) 및 TypeScript에서 highcharts 그래프 표시