0

我提供了一个下拉列表供用户选择 nvd3 图表正在可视化的数据集。一切正常，除了在数据集更改后工具提示不会显示。奇怪的是，如果我关闭某些东西或在堆叠和分组之间切换（我使用的是 multiBarChart 模型），工具提示又开始出现。

我一定错过了一些步骤，但我似乎无法弄清楚它是什么。我试过调用dispatch.stateChange(state)和dispatch.stateChange(state)但他们似乎没有帮助。

任何建议将不胜感激。

这是我用来重新加载图表的简单 HTML：

<form id="myForm">
  <select id="selectTable" onChange="loadChart(this.value)">
  </select>
</form>

以下是我的主要代码的其余部分。它基本上取自示例，并没有太大的不同：

function loadChart(TABLE_NAME) {

  var x_metric = getXMetric(json, TABLE_NAME);
  var graphNames = getMetricNames(TABLE_NAME);

  console.log(graphNames);

  // pack everything into toGraph
  d3.csv(getCSVRequest(TABLE_NAME, graphNames), function(data)
    {
      // remove x-metrics from graphNames if it's there
      for (var i = 0; i < graphNames.length; i++) {
        if (x_metric == graphNames[i]) {
          graphNames.splice(i, 1);
          break;
        }
      }

      var toGraph = initToGraph(graphNames);

      // get rid of last empty line
      if (data[data.length-1].TIME == "") {
        data = data.splice(0, data.length-1);
      }

      // parse time if it exists
      if (x_metric == "TIME") {
        for (var i = 0; i < data.length; i++) {
          data[i]["TIME"] = parseTime(data[i]["TIME"]);
        }
      }

      // make sure we're sorting by the x_metric
      if (x_metric != "TIME") {
        data.sort(function(a,b) {
          a[x_metric] = +a[x_metric];
          b[x_metric] = +b[x_metric];

          if (a[x_metric] < b[x_metric]) {
            return -1;
          } else if (a[x_metric] > b[x_metric]) {
            return 1;
          } else {
            return 0;
          }
        });
      }

      for (var i = 0; i < data.length; i++) {
        var d = data[i];
        for (var j = 0; j < graphNames.length; j++) {
          if (d[graphNames[j]] != "") {
            var tempMap = {};
            tempMap["x"] = +d[x_metric];
            tempMap["y"] = +d[graphNames[j]];
            toGraph[j]["values"].push(tempMap);
          } 
        }
      }

      createChart(TABLE_NAME, toGraph, x_metric);
    }); 
}

function createChart(name, toChart, x_metrics) {
  nv.addGraph(function() {
      var chart = nv.models.multiBarChart();

      chart.multibar
        .hideable(true);

      chart.reduceXTicks(true).staggerLabels(true);

      chart.xAxis
          .showMaxMin(true);

      if (x_metrics == "TIME") {
        chart.xAxis.tickFormat(function(d) {
          var time = new Date(d);
          var toReturn;
          var year = time.getFullYear() - 2000; // assume day will be past 2000 (and hopefully before 3000....)
          if (time.getMinutes() < 10)
            toReturn = time.getMonth() + "/" + time.getDate() + "/" + year +
              " " + time.getHours() + ":0" + time.getMinutes();
          else
            toReturn = time.getMonth() + "/" + time.getDate() + "/" + year +
              " " + time.getHours() + ":" + time.getMinutes();
          return toReturn;
        });
      }

      chart.yAxis
        .tickFormat(d3.format(',.1f'));

      d3.select('#chart svg')
          .datum(toChart)
        .transition().duration(500).call(chart);


      return chart;
  });
}
4

1 回答 1

1

原来我只需要重新加载我的图表。添加

document.getElementById("chart").innerHTML = "<svg></svg>";

到 loadChart 开始工作！

于 2013-07-19T18:37:55.797 回答