Question

我正在使用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>

这是结果

其中一个要求是，现在我应该只显示＆＃34;金额＆＃34;图表中的属性，这意味着灰线应该从图表中消失，另一个要求是我需要将其放在您看到的工具提示中：

$金额（总额），在这种情况下为150美元（1）

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

Answer 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;
  })];
}

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

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

然后将chart-options="chartOptions"添加到canvas元素。

请注意，它只能编辑现有标签，您无法在工具提示中添加新数据（例如总数）。

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

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

具有一些特殊要求的角度图表

1 个答案: