javascript - 如何将 Google 图表颜色设置从文件移动到另一个文件

标签 javascript google-visualization

所以我正在开发一个代码已经存在的项目。

在下面的 2 个文件中,我需要在 IF 语句中以某种方式将颜色设置从第一个文件删除到第二个文件。

原因是第一个文件将填充/注入(inject)来自后端的信息,但为了做到这一点,我必须从数据集中删除属性(标签、填充颜色、描边颜色、点颜色、点描边颜色、点突出填充和点突出描边)数组文件 1 到文件 2,以便将样式与将注入(inject)的实际数据分开

我尝试简单地将数据集部分添加到第二个文件中,但没有显示任何内容 - 可以以某种方式将其添加到 Chart.types.Line.extend 对象或 AJAX 部分吗?

提前非常感谢

文件 1:(将向其注入(inject)数据):

{  
  "labels":[  
     "1 Feb",      
     "8 Feb",      
     "15 Feb",      
     "22 Feb",      
     "29 Feb",      
     "7 Mar",      
     "14 Mar",      
     "21 Mar",      
     "28 Mar",      
     "4 Apr",      
     "11 Apr",      
     "18 Apr",      
     "25 Apr"
  ],
  "datasets":[  
     {  
        "label":"Tenders",
        "fillColor":"rgba(253,0,20,0.2)",
        "strokeColor":"rgba(253,0,20,1)",
        "pointColor":"#fff",
        "pointStrokeColor":"rgba(253,0,20,1)",
        "pointHighlightFill":"#fff",
        "pointHighlightStroke":"rgba(253,0,20,1)",
        "data":[  
        77,
        55,
        40,
        65,
        59,
        80,
        81,
        56,
        55,
        65,
        59,
        80,
        75            
        ]
     }
  ]
}

文件 2:(我想要数据集属性的位置):

if (document.getElementById("chart_div_won")) {

    Chart.types.Line.extend({
        name: "LineAlt",
        initialize: function(data) {
            Chart.types.Line.prototype.initialize.apply(this, arguments);
            var xLabels = this.scale.xLabels;
            var xLabelsLength = xLabels.length;
            xLabels.forEach(function(label, i) {
                if (i % 4 != 0 || i <= 1 || i == xLabelsLength - 1)
                    xLabels[i] = '';
            })
        }
    });

    var form_data = {};
    $.ajax({
        type: "GET",
        url: "../../../sample_data/chart1.json",
        data: form_data,
        success: function(response) {
            var ctx = document.getElementById("chart_div_won").getContext("2d");
            var options = {
                responsive: true,
                maintainAspectRatio: true,
                pointDotRadius: 5,
                showXLabels: 5,
            };
            var myLineChart = new Chart(ctx).LineAlt(response, options);

        },
        error: function() {
            $('div#chart-container').html('<div class="notification-body"><p class="notification-heading">Loading error...</p><p class="notification-description">Unfortunatley for some reason visual data failed to load.</p></div>'); 
        },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    });
}

最佳答案

所以这是我所得到的:

if (document.getElementById("chart_div_won")) {


    Chart.types.Line.extend({
        name: "LineAlt",
        initialize: function(data) {
            Chart.types.Line.prototype.initialize.apply(this, arguments);
            var xLabels = this.scale.xLabels;
            var xLabelsLength = xLabels.length;
            xLabels.forEach(function(label, i) {
                if (i % 4 != 0 || i <= 1 || i == xLabelsLength - 1)
                    xLabels[i] = '';
            })
        }
    });

    var datasets = [{
                        "label":"Tenders",
                         "fillColor":"rgba(253,0,20,0.2)",
                         "strokeColor":"rgba(253,0,20,1)",
                         "pointColor":"#fff",
                         "pointStrokeColor":"rgba(253,0,20,1)",
                         "pointHighlightFill":"#fff",
                         "pointHighlightStroke":"rgba(253,0,20,1)"}
        ];
    var form_data = {};

    $.ajax({
        type: "GET",
        url: "../../../sample_data/chart1.json",
        data: form_data.push(datasets),

        success: function(response) {
            var ctx = document.getElementById("chart_div_won").getContext("2d");
            var options = {
                responsive: true,
                maintainAspectRatio: true,
                pointDotRadius: 5,                                                  
                showXLabels: 5,
            };
            var myLineChart = new Chart(ctx).LineAlt(response, options);

        },
        error: function() {
            $('div#chart-container').html('<div class="notification-body"><p class="notification-heading">Loading error...</p><p class="notification-description">Unfortunatley for some reason visual data failed to load.</p></div>'); 
        },
        data: form_data.push(datasets),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    });
}

我正在尝试添加一个数据集数组,然后将其添加到数据集数组中第一个文件的数组中。不走运,但我认为上面这个答案中我的代码在语法上是错误的

关于javascript - 如何将 Google 图表颜色设置从文件移动到另一个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39222250/

相关文章:

javascript - 获取 CSS3 转换元素的大小

javascript - 将分钟转换为小时 (H :mm) in MomentJS

javascript - 如何在 google visualization api 柱形图中使用的 json 对象中用数字替换字符串值

numbers - 谷歌图表 - 格式编号

javascript - Phantom JS 消除屏幕截图的边距

SVG 与基于 HTML5 Canvas 的图表

javascript - Jquery 委托(delegate)/直播不工作

javascript - 自合并对象 - lodash

javascript - 从 webpack build 中提取一个 javascript 文件

javascript - 如何动态添加数据做Google Timeline图表?