Есть ли способ использовать NumberFormat () форматера (Google Charts) в обертке vue-google-charts vue.js - PullRequest
Новая
       11

Есть ли способ использовать NumberFormat () форматера (Google Charts) в обертке vue-google-charts vue.js

2 голосов
/ 18 июня 2019

Мне было поручено отформатировать некоторые столбцы в диаграммах с помощью vue-google-charts, оболочки vue.js для Google Charts, и я не уверен, что NumberFormat () даже поддерживается в vue-google-charts.

Во-первых, если кто-то знает, так это или нет, я хотел бы знать, чтобы не тратить много времени на то, что невозможно. Но если это так, мне наверняка понравится пример того, как это сделать.

Что мы делаем, так это возвращаем данные нашей диаграммы из базы данных и передаем их в эту оболочку vue.js. Мы создаем несколько диаграмм, но есть столбцы с запятыми, которые мы хотим удалить.

Пожалуйста, ознакомьтесь с существующим кодом. Я пытаюсь реализовать это, используя @ready, как описано в документации для vue-google-charts.

документы vue-google-charts -> https://www.npmjs.com/package/vue-google-charts

Вот наш существующий код с небольшим каркасом метода onChartReady. 

<GChart
                    v-if="chart.data"
                    id="gchart"
                    :key="index"
                    :options="{
                        pieSliceText: chart.dropDownPie,
                        allowHtml: true
                    }"
                    :type="chart.ChartType"
                    :data="filtered(chart.data, chart.query, chart.query_type)"
                    :class="[
                    {'pieChart': chart.ChartType == 'PieChart'},
                    {'tableChart': chart.ChartType == 'Table'}
                    ]"
                    @ready = "onChartReady"
            />

А потом ... 

<script>
import { GChart } from 'vue-google-charts';
import fuzzy from 'fuzzy';
import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';

export default {
    components: {
        GChart,
        Icon
    },
    props: {

    },
    data() {
        return {
            charts: window.template_data,
            selected: 'null',
            selects: [],
            chartToSearch: false,
            directDownloads: {
                'Inactive Phones' : {
                    'slug' : 'phones_by_status',
                    'search_by' : 2,
                    'search' : '/Inactive/'
                },
                'Active Phones' : {
                    'slug' : 'phones_by_status',
                    'search_by' : 2,
                    'search' : '/Active/'
                },

            }
        }
    },
    created(){
        for (let i in this.charts){
            if( !this.charts[i].slug ) continue;
            $.post(ajaxurl, {
                action: 'insights_' + this.charts[i].slug,
            }, (res) => {
                console.log(res.data);
                if (res.success) {
                    this.$set(this.charts[i], 'data', res.data);
                }
            });
        }
        // console.log(this.charts);
    },
    methods: {
        onChartReady(chart,google) {
            let formatter = new.target.visualization.NumberFormat({
                pattern: '0'
            });
            formatter.format(data, 0);
            chart.draw(data)
        },
        toggleChart(chart) {
            jQuery.post(ajaxurl, {
                'action': 'update_insight_chart_type',
                'chartType': chart.ChartType,
                'chartSlug': chart.slug
            }, (res) => {
                chart.ChartType = res.data
            })
        },
        csvHREF(chart) {
            return window.location.href + '&rr_download_csv=' + chart.slug + '&rr_download_csv_search_by=' + chart.query_type + '&rr_download_csv_search=' + chart.query.trim()
        },
        filtered(data, query, column) {
            query = query.trim();
            if (query){
                let localData = JSON.parse(JSON.stringify(data));
                let column_Headers = localData.shift();

                localData = localData.filter((row)=>{
                    if( query.endsWith('/') && query.startsWith('/') ){
                        return new RegExp(query.replace(/\//g, '')).test(String(row[column]));
                    }
                    return String(row[column]).toLowerCase().indexOf(query.toLowerCase()) > -1;
                });
                localData.unshift(column_Headers);
                return localData;
            }
            return data;
        },
        filterIcon(chart) {
            chart.searchVisible = !chart.searchVisible;
            chart.query = "";
            setTimeout(()=>{
                document.querySelector(`#chart-${chart.slug} .insightSearch`).focus();
            }, 1);
        }
    }
}
document.getElementsByClassName('google-visualization-table')

Если кто-нибудь может помочь каким-либо способом, я весь в ушах.

Спасибо!

1 Ответ

1 голос
/ 18 июня 2019

не знаком с vue или оболочкой,
но в диаграммах Google вы можете использовать обозначение объекта в ваших данных,
предоставить отформатированные значения.

по умолчанию все типы диаграмм будут отображать отформатированные значения.

Google для форматирования просто сделает это за вас.

поэтому в ваших данных замените ваши числовые значения объектами,
где v: - это значение, а f: - это отформатированное значение ... 

{v: 2000, f: '$2,000.00'}

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['table']
}).then(function () {

  var chartData = [
    ['col 0', 'col 1'],
    ['test', {v: 2000, f: '$2,000.00'}],
  ];

  var dataTable = google.visualization.arrayToDataTable(chartData);

  var table = new google.visualization.Table(document.getElementById('chart_div'));
  table.draw(dataTable);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...