角图表与一些特殊的要求 [英] Angular Charts with some especial requirements

问题描述

我使用角图表，昨天我做到了，但现在我的客户希望一些变化，这里的数据我收到：

I am using Angular Charts in order to achieve what I want, yesterday I did it, but now my client wants some changes, here is the data I am receiving:

{
  "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
      }
    }
  }
}

和这里是code我使用呈现在我的图表，数据，现在我只是用转换播放：{}的部分对象，其中包含总和金额

and here is the code I am using to render that data in my chart, for now I am just playing with the "conversions : {} part of the Object, which contains total and 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>

这是结果。

的要求之一是，现在我应该图表，这意味着灰线应从图表消失只显示了量的属性，另一个要求是，我需要把这个在提示您看到有：

one of the requirements is that now I should display only the "amount" property in the chart, which means that the grey line should disappear from the chart, and the other requirement is that I need to put this in that tooltip you see there:

$数额（总），其在这种情况下将是$ 150（1）

$ The Amount (total) which in this case would be $150 (1)

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

so, what do you recommend me to do in this case ? is there a way to do that ?

推荐答案

取下字符总量去掉简单的总从 seriesConv 阵列。但是，因为现在只有一个意甲，也可以是简单的：

Remove the total from the chars is as simple as removing the "total" from the seriesConv array. But since it's now only one serie, it can be simpler:

.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 选项：

To use a custom format inside the tooltip you can use the tooltipTemplate option from Chart.js:

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

然后加入排行榜选项=chartOptions画布元素。

请注意，这只是可以编辑现有标签，你不能将新数据添加到工具提示（占总为例）。

Note that it's only possible to edit the existing label, you can't add new data to the tooltip (the total for example).

要能够添加新的数据你就必须使用（比较复杂） customTooltips 选项。祝你好运。

To be able to add new data you'll have to use the (much complex) customTooltips option. Good luck with that.

此外，请阅读文档并尝试玩耍。本次论坛是关于产品规划，而不是要求别人做你的工作。

Also, please read the docs and try playing around. This forum is for question about programming, not for asking the others to do your job.

这篇关于角图表与一些特殊的要求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！