0

我正在使用出色的图表插件 Flot 将 html 页面中的字符串替换为图表。然而，不知何故，情节本身并没有显示出来。

占位符：

<div class="chart" id="example1" style="width:300px; height:150px">2009:12.90,2010:12.80,2011:13.90,2012:14.50</div>
<div class="chart" id="example2" style="width:300px;height:150px">1:2,2:1,3:6,4:3</div>

jQuery 代码：

$(".chart").each(function(index, value) {

    var id = this.id;

    var obj = $("#" + id).html().split(",");
    var chartdata = [];

    $.each(obj, function(i, val) {
         chartdata[i] = "[" + val.replace(":","," ) + "]";
         console.log(val);
    });

    var thechart = chartdata.join(",");
    console.log(thechart);

    var d1 = "[" + thechart + "]";
    console.log("#" + id + " -> " + d1);

    $.plot($("#" + id), [
        {
            data: d1,
            lines: { show: true, fill: true }
        },
    ]);

 });

当我用实际数据替换 d1 时，它可以工作。我怀疑这与以字符串或其他形式呈现的数据有关。虽然不能正确。我不想将数据添加到 jquery 调用中，因为我使用的是 cms，因此用户可以在编辑页面时更改图表数据。

4

1 回答 1

1

是的，这是因为您将数据创建为一个大字符串，而不是一个值数组。以这一行为例：

chartdata[i] = "[" + val.replace(":","," ) + "]";

相反，您应该（大致）使用如下代码：

values = val.split(":");
chartdata[i] = [parseInt(values[0]), parseInt(values[1])];

剩下的大部分代码都是不必要的；obj 已经是一个列表。

你可以通过使用 jQuery 的 'map' 而不是 'each' 让整个事情变得更简单；那么你甚至不需要单独的图表数据变量；大致（未经测试）是这样的：

$(".chart").each(function() {

    var id = this.id;
    var data = $("#" + id).html().split(",");

    $.map(data, function(point) {
        return $.map(point.split(":"), function(value) {
            return parseInt(value);
        });
    });

    $.plot("#" + id, [{
        data: data,
        lines: {
            show: true,
            fill: true
        }
    }]);
});
于 2013-01-05T15:03:04.923 回答