0

我正在使用Angular Charts来实现我想要的，昨天我做到了，但现在我的客户想要一些改变，这是我收到的数据：

{
  "12-15-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 8,
        "real": 1
      }
    }
  },
  "12-16-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 18,
        "real": 1
      }
    }
  },
  "12-17-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 22
      },
      "clicks": {
        "total": 12,
        "real": 1
      }
    }
  },
  "12-18-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "12-19-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 12,
        "real": 1
      }
    }
  },
  "12-20-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 10,
        "real": 1
      }
    }
  },
  "12-21-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 22
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-22-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 150
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-26-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 4,
        "real": 1
      }
    }
  },
  "12-28-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-29-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "01-03-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 2,
        "real": 1
      }
    }
  },
  "01-04-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 3,
        "real": 1
      }
    }
  },
  "01-05-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "01-06-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "01-10-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "01-11-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 2,
        "real": 1
      }
    }
  },
  "01-14-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 22,
        "real": 1
      }
    }
  }
}

这是我用来在图表中呈现该数据的代码，现在我只是在玩"conversions : {}对象的一部分，其中包含total和amount

    .then(function(data) {          
      $scope.labels = Object.keys(data);
      $scope.seriesConv = ["amount", "total"];
      $scope.dataConv = $scope.seriesConv.map(function(serie) {
        return $scope.labels.map(function(label) {
          $scope.trafficSource = Object.keys(data[label])[0];
          return data[label][$scope.trafficSource].conversions[serie];
        });
      });
    }

这里是 HTML

  <canvas id="line" class="chart chart-line" height="100"
          chart-data="dataConv" chart-labels="labels"
          chart-series="seriesConv">
  </canvas>

这是结果

在此处输入图像描述

一个要求是现在我应该只在图表中显示“金额”属性，这意味着灰线应该从图表中消失，另一个要求是我需要将它放在你在那里看到的那个工具提示中：

$ 金额（总计）在这种情况下为 $150 (1)

那么，在这种情况下，您建议我做什么？有没有办法做到这一点 ？

4

1 回答 1

1

从字符中删除总数就像"total"从seriesConv数组中删除一样简单。但由于它现在只有一个系列，它可以更简单：

.then(function(data) {          
  $scope.labels = Object.keys(data);
  $scope.seriesConv = ["Amount"];
  $scope.dataConv = [$scope.labels.map(function(label) {
    $scope.trafficSource = Object.keys(data[label])[0];
    return data[label][$scope.trafficSource].conversions.amount;
  })];
}

要在工具提示中使用自定义格式，您可以使用tooltipTemplateChart.js 中的选项：

$scope.chartOptions = {
  tooltipTemplate: "$<%= value %>",
};

然后添加chart-options="chartOptions"到画布元素。

请注意，只能编辑现有标签，不能将新数据添加到工具提示（例如总数）。

为了能够添加新数据，您必须使用（非常复杂的）customTooltips选项。祝你好运。

另外，请阅读文档并尝试使用。这个论坛是关于编程的问题，而不是要求其他人做你的工作。

于 2016-01-21T04:44:51.643 回答