Question

我有一个json文件，它有一个很大的＆＃34;图表＆＃34;部分有许多不同名称的不同图表。使用Dimple.JS我尝试直接从json构建图表，但我无法弄清楚如何正确获取x和y数据。我想绘制x [0]，y [0]

{ "Name": "test", "Charts": [
    {
        "chartName": "Idle Times",
        "disk": 0,
        "OpCode": "Read",
        "xAxis": [0,100,200,300,400,500],
        "yAxis": [337487,8565,11419,9704,7598]
    },
    {
        "chartName": "Idle Times",
        "disk": 0,
        "OpCode": "Read",
        "xAxis": [0,100,200,300,400,500],
        "yAxis": [337487,8565,11419,9704,7598]
    }]
}

这是构建图表的地方，这会构建一个图表，但只有一点。当您将鼠标悬停在图表上时，它会显示x轴阵列和y轴阵列，但它只会绘制第一个数字。

var data = $rootScope._idleTimes.items;
    console.log(data);
    var svg = dimple.newSvg("#idle-times-chart-container", 1000, 500);
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "xAxis");
    var y = chart.addCategoryAxis("y", "yAxis");
    y.tickFormat = "%";
    chart.addSeries("OpCode", dimple.plot.bar);
    var myLegend = chart.addLegend(950, 50, 60, 100, "Right");
    chart.draw();
    chart.legends = [];
    svg.selectAll("title_text")
        .data([" "])
        .enter()
        .append("text")
            .attr("x", 499)
            .attr("y", function (d, i) { return 90 + i * 14; })
            .style("font-family", "sans-serif")
            .style("font-size", "10px")
            .style("color", "Black")
            .text(function (d) { return d; });
    var filterValues = dimple.getUniqueValues(data, "OpCode");
    myLegend.shapes.selectAll("rect")
        .on("click", function (e) {
            var hide = false;
            var newFilters = [];
            filterValues.forEach(function (f) {
                if (f === e.aggField.slice(-1)[0]) {
                    hide = true;
                } else {
                    newFilters.push(f);
                }
            });
            if (hide) {
                d3.select(this).style("opacity", 0.2);
            } else {
                newFilters.push(e.aggField.slice(-1)[0]);
                d3.select(this).style("opacity", 0.8);
            }
            filterValues = newFilters;
            chart.data = dimple.filterData(data, "OpCode", filterValues);
            chart.draw(1000);
        });

我的问题是，我是否需要重新格式化json文件，以便每行有一条记录？像这样：

{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":0, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":100, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":200, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":300, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":400, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":500, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":600, "yAxis":1234}

或者有没有办法使用角度，凹痕或其他一些javascript来使用我当前的json文件？

提前感谢您的帮助！

Answer 1

我担心如果你想使用凹坑，你需要完全按照你的描述重新格式化数据。在您的源代码中，或在运行时，具体取决于您的要求。您可能还想添加某种标识符来分解您的气泡。为addSeries方法中第一个参数中指定的维度的每个不同值绘制一个气泡，因此在这种情况下，每个OpCode值只能获得1个气泡，这可能不是您想要的。或者，您可以传递x和y值：

chart.addSeries(["xAxis", "yAxis", "OpCode"], dimple.plot.bubble);

只要数据中没有重复的x，y和OpCode值对，这将有效。

Dimple.js x和y数据在json文件中的每个图表对象的数组中。我是否必须重新格式化所有json文件？

1 个答案: