2016-11-29 18 views
1

이상한 문제가 발생하여 수정하는데 어려움이 있습니다. 내 차트에는 x 축과 y 축의 선이없고 도구 설명 상자에는 상자 자체가 아닌 텍스트 만 표시됩니다.nvd3-ng2를 사용하는 격자가 누락 됨

ng2-nvd3의 github 페이지에있는 readme의 "기본 사용법"섹션의 예제 불연속 막 대형 차트를 사용하여이 내용을 테스트했습니다.

어떤 아이디어가 원인입니까? 부트 스트랩이 아닌 최소한의 스타일과 아주 최소한의 HTML로 설정된 매우 간단한 angular2 사이트를 가지고 있습니다. 모든 스타일을 제거해도 문제는 계속 발생합니다.

다른 모든 차트가 완벽하게 작동합니다.

Screenshot showing problems with sample bar chart from readme

빛 갈색 막대의 상단에 D196.5는 툴팁입니다. 볼 수 있듯이 모든 눈금 선 및 툴팁 상자가 누락되었습니다. https://github.com/ekuusi/nvd3-ng2-grid-issue

샘플 앱이 문제를 전시 최소한의 MEAN 프로젝트입니다 : 누군가가 문제가 자신을 테스트하고자하는 경우

다음은 샘플 응용 프로그램입니다. 프로젝트를 실행하려면 : 3000 : 로컬 폴더

    • 사본 NPM은
    • NPM 실행이
    • NPM을 빌드, 설치를 응용은 localhost로 수신

    를 시작합니다. 앱에는 Hello World 및 문제를 보여주는 막대 차트가있는보기가 하나뿐입니다.

    편집 : 해결되었지만 다른 사람이 같은 문제에 부딪히면 여기에 남겨 두겠습니다. 또한 Webpack에서 Angular 2 프로젝트에서 ng2-nvd3을 작동시키는 방법을 보려면 여기에 링크 된 repo를 사용하십시오.

  • 답변

    0

    그래, 구현 한 최종 릴리스에서 ng2-nvd3을 작동시키는 데 필요한 Webpack 해결 방법으로 인해 필요한 스타일이 누락되었습니다.

    마스터 스타일 시트 nv.d3.min.css를 nvd3 노드 모듈의 프로젝트 폴더에 복사하고 내 인덱스 페이지에 링크하여이 문제를 해결했습니다.