(amCharts)我有一个图表,数据有两个不同的前缀。有什么办法告诉函数哪个数据有哪个前缀?

时间:2017-11-01 20:20:59

标签: javascript jquery amcharts

我有一个amChart图表,数据来自它下面的两个表格(代码被修改from this SO answer)。每个表格中的每个类别都以不同的前缀开头:第一个表格以(销售额)开头,第二个表格以(市场)开头。

以下是我的代码:http://jsfiddle.net/uoxbm2d3/2/

由于有两个表,它是一个列/条形图,我需要根据哪个表或它们具有的前缀来堆叠列/条。因此(Sales)将仅与(Sales)堆叠,或者换句话说,表1中的数据将仅与表1堆叠。与(市场)/表2相同,仅与其兄弟姐妹堆叠。像这样:

Sorry for the terrible editing, but you get the idea

绿色/黄色/橙色来自表1(销售);蓝/紫色来自表2(市场)。

有没有办法告诉函数哪个图来自哪个表?或者至少告诉函数哪个数据有哪个前缀?

这是一段脚本

    function generateGraphsFromData(chart, chartData) {
    //get the chart graph value fields as lookup table with a seen property set to false by default
    //this will be used to determine what graphs need to be removed when looking at the data
    var graphValueFields = chart.graphs.reduce(function(valueFields, graph) {
        valueFields[graph.valueField] = 0;
        return valueFields;
    }, {});

    var removeValueFields = [];

    //create an array of new graph value fields by filtering out the categoryField
    //and the currently known valueFields. 
    var newGraphValueFields = [];

    Object.keys(chartData[0]).filter(function(key) {
        return key != chart.categoryField;
    }).forEach(function(valueField) {
        //if this is a new graph, add it to the list
        if (graphValueFields[valueField] === undefined) {
            newGraphValueFields.push(valueField);
        } else {
            //otherwise, set the seen flag to 1
            graphValueFields[valueField] = 1;
        }
    });

    //for each new value field left over, create a graph object and add to the chart.
    newGraphValueFields.forEach(function(valueField) {
        var graph = new AmCharts.AmGraph();
        graph.title = valueField;
        graph.valueField = valueField;
        graph.balloonText = "<strong>[[title]]</strong><br /> Rp[[value]]";
        graph.id = valueField; //use the valueField as the ID for ease of removal
        graph.type = 'column';
        graph.lineAlpha = 0;
        graph.fillAlphas = 0.5;
        graph.bullet = "none";
        graph.stackable = true; // disable stacking
        chart.addGraph(graph);
    });

    //loop through the graphValueFields lookup table and remove all graphs that were not seen when
    //rescanning the data
    Object.keys(graphValueFields).forEach(function(removeGraphValueField) {
        if (graphValueFields[removeGraphValueField] === 0) {
            chart.removeGraph(chart.getGraphById(removeGraphValueField));
        }
    })
    }

1 个答案:

答案 0 :(得分:1)

添加新图表并删除任何旧图表后,您可以按标题排序然后再次循环查找第一个不匹配的前缀,并将图表的newStack属性设置为true在其余图表中将其设置为false。例如:

  chart.graphs.sort(function(lhs, rhs) {
    //sort by title, ensures that the sales (first table) data comes first
    var lhsSalesIdx = lhs.title.indexOf('(Sales)');
    var rhsSalesIdx = rhs.title.indexOf('(Sales)');

    if (lhsSalesIdx !== -1 && rhsSalesIdx === -1) {
      return -1;
    }
    else if (lhsSalesIdx === -1 && rhsSalesIdx !== -1) {
      return 1;
    }
    else {
        return lhs.title.localeCompare(rhs.title);
    }
  });
  var stackSet = false;
  //find the first instance of the market row graph and set its newStack property to true
  //while clearing out the others
    for (var i = 0; i < chart.graphs.length; ++i) {
    if (!stackSet && chart.graphs[i].title.indexOf('(Sales)') === -1) {
        chart.graphs[i].newStack = true;
        stackSet = true;
    }
    else {
      chart.graphs[i].newStack = false;
    }     
  }

Updated fiddle - 请注意,我在新的图形循环中将stackable设置为true,以便它也能正常工作。