javascript - 将谷歌可视化：折线图转换为 RTL

Question

我需要将 LTR 谷歌可视化：折线图转换 为 RTL 这是 LTR 的一个示例

我需要它是这样的

我已经反转了图表，但是以蓝色选择的部分的问题是 {280 , 210 , 140 , 70 , 0}

我已经在那里通过向导编辑了这部分，但我无法提取代码。

Answer 1

我没有找到解决方案，但我所做的就是像这样反转统计数据

如您所见，“ الأسبوع الأول ”是第一列，最后一列是“ الأسبوع الثامن ”，这就是我临时解决问题的方法。
为此，您需要添加此参数 { reverseCategories: true, reverseAxis: true,vAxis:direction: -1,legend: 'right'}

完整的代码是：

<!-- Charts library -->
<!-- Load the AJAX API -->
<script src="http://www.google.com/jsapi"></script>
<script>

    /*
     * This script is dedicated to building and refreshing the demo chart
     * Remove if not needed
     */

    // Demo chart
    var chartInit = false,
        drawVisitorsChart = function () {

            // Create our data table.
            var data = new google.visualization.DataTable();

            var lengthOfArray = '<%=tarteebLength %>';
            var arrayOfTemp = <%=tempJSON %>;

            var raw_data = new Array();

            raw_data =[[ 'ترتيبك فى الأسبوع']];
            var counter = 1;
            for (var j = 0; j < lengthOfArray; ++j) {
                raw_data[0][counter] = parseInt(arrayOfTemp[j]);
                //alert(raw_data[0][counter]);
                ++counter;
            }

            //var raw_data = [['ترتيبك فى الأسبوع', 5,4,0,0,0,0,0,0]];
            var months = ['الأسبوع الأول', 'الأسبوع الثانى', 'الأسبوع الثالث', 'الأسبوع الرابع', 'الأسبوع الخامس', 'الأسبوع السادس', 'الأسبوع           السابع', 'الأسبوع الثامن'];

            data.addColumn('string', 'Month');
            for (var i = 0; i < raw_data.length; ++i) {
                data.addColumn('number', raw_data[i][0]);
            }

            data.addRows(months.length);

            for (var j = 0; j < months.length; ++j) {
                data.setValue(j, 0, months[j]);
            }
            for (var i = 0; i < raw_data.length; ++i) {
                for (var j = 1; j < raw_data[i].length; ++j) {
                    data.setValue(j - 1, i + 1, raw_data[i][j]);
                }
            }

            // Create and draw the visualization.
            // Learn more on configuration for the LineChart: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
            var div = $('#demo-chart'),
                divWidth = div.width();
            new google.visualization.LineChart(div.get(0)).draw(data, {
                title: 'ترتيبك على مدار المسابقة',
                width: divWidth,
                height: $.template.mediaQuery.is('mobile') ? 180 : 265,
                legend: 'right',
                yAxis: { title: '(weeks)' },
                backgroundColor: ($.template.ie7 || $.template.ie8) ? '#494C50' : 'transparent',    // IE8 and lower do not support transparency
                legendTextStyle: { color: 'white' },
                titleTextStyle: { color: 'white' },
                hAxis: {
                    textStyle: { color: 'white' },
                    //direction: -1
                },
                vAxis: {
                    gridlines: { color: '#9933ff' },
                    textStyle: { color: 'white' },
                    baselineColor: '#666666',
                    direction: -1,
                },
                chartArea: {
                    top: 35,
                    left: 30,
                    width: divWidth - 40
                },
                reverseCategories: true,
                reverseAxis: true,
                lineWidth: 5,
                legend: { position: 'bottom', textStyle: { color: 'white', fontSize: 16 } },
                colors: ['#ff9900'],
                curveType: 'function',
            });

            // Ready
            chartInit = true;
        };

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {
        'packages': ['corechart']
    });

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawVisitorsChart);

    // Watch for block resizing
    $('#demo-chart').widthchange(drawVisitorsChart);

    // Respond.js hook (media query polyfill)
    $(document).on('respond-ready', drawVisitorsChart);

</script>