2016-02-16 3 views
1

Я очень новичок в веб-дизайнере и пытаюсь загрузить chart.js, но у меня есть некоторые проблемы ... после прочтения документации, я думаю, что у меня есть правильные части, в неправильном порядке?Chart.js неправильно отображает/устанавливает проблемы

  • установленные chart.js через NMP и связан с сценария в заголовке, затем добавляют

<canvas id="myChart" width="400" height="400"></canvas> к телу.

после того, что кажется, вам нужно только (в теге сценария в теле) ...

var myPieChart = new Chart(ctx[0]).Pie(data,options);

, а затем на самом деле данные ...

var data = [ 
    { 
     value: 300, 
     color:"#F7464A", 
     highlight: "#FF5A5E", 
     label: "Red" 
    }, etc...... 

к сожалению, ничего не видят на странице. На самом деле диаграмма.js имеет отличную документацию, но я немного потерял с самого начала любые идеи? благодаря!

jsfiddle добавлено для наглядности! https://jsfiddle.net/bencasalino/tfsy6gxL/

и учебник я использую http://www.sitepoint.com/creating-beautiful-charts-chart-js/

+1

Подумайте о том, чтобы добавить к вашему вопросу [JSFiddle] (https://jsfiddle.net/) или «исполняемый фрагмент кода», чтобы мы могли реально решить, в чем проблема :). –

+0

спасибо! вот моя скрипка, https://jsfiddle.net/bencasalino/tfsy6gxL/ Я использую внешние библиотеки, хотя так и не появляется, я просто чувствую, что у меня есть порядок в любом случае неправильно! –

+1

«Я просто чувствую, что у меня есть порядок всего, что неправильно, в любом случае!» не уверен, что вы имеете в виду ... скрипка должна работать как можно лучше для тех, кто ее запускает :). «У вас были теги HTML , где нет диаграммы .js/Chart.js на JSFiddle (также myjs.js не существует на своих серверах). " вероятно, поэтому не полезно, я просто оставлю их на данный момент ... также принимаю ответ, если вы считаете, что это хорошо :). –

ответ

2

Основываясь на поставляемый fiddle в вашем comment, но не на свой вопрос, было несколько проблем:

  1. Вы имели HTML <script> тегов в JavaScript раздел скрипки.
  2. Вы загрузили Chart.js с <script type="text/javascript" src="chart.js/Chart.js"></script>, где нет chart.js/Chart.js на JSFiddle (также myjs.js не существует на своих серверах).
  3. У вас был var skillsChart = new Chart(context).Pie(data);до ваш pieData массив, а не после.
  4. var skillsChart = new Chart(context).Pie(data); должно было быть var skillsChart = new Chart(context).Pie(pieData);, так как ваш массив называется pieData, а не data.

См. Это fiddle.

Надеюсь, это помогло! :)

+0

ах большое вам спасибо, я проверил ваш js скрипка, все это имеет гораздо больше смысла, чем мое. Я все еще запутался в том, как вы на самом деле загрузили диаграмму. Я думал, что chart.js зависит от фактической загрузки библиотеки chart.js. Я могу заставить его работать, когда я помещаю все js в тег скрипта в нижней части тела. Но когда я внешне связываю '' в заголовке, который он разбивает. –

+1

@BenjaminCasalino Я не уверен, что проблема на вашем конце, но, надеюсь, эти пункты помогут ... все, что вам нужно: 1. Библиотека, cdn (https://cdnjs.cloudflare.com/ajax/libs /Chart.js/1.0.2/Chart.min.js) или локально. 2. A 3. Контекст 4. Некоторые данные 5. Объект «Chart». Надеюсь это поможет! :) (И я ценю мой первый принятый вопрос!)) –

+0

да спасибо, похоже, сейчас работает. Я просто не понял, как jsfiddle знал, что выводить без ссылки на эту библиотеку chart.js, но я думаю, что это просто выяснилось :) спасибо еще раз! –

Смежные вопросы