2016-11-24 5 views
1

Мне должно быть что-то не хватает, но я не могу получить всплывающие подсказки для работы над этим графиком линий диаграмм. Должен ли я их настраивать?Нет подсказок на графике диаграммы JS

Chart.defaults.global.defaultFontColor = '#FFF'; 

      var ctx = document.getElementById("myChart"); 
      var myChart = new Chart(ctx, { 
       type: 'line', 
       data: { 
        // labels: chartdata.labels, 
        // datasets: dataset 
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
       }, 
       options: { 
          scales: { 
           yAxes: [{ 
            ticks: { 
             beginAtZero:true 
            } 
           }] 
          }, 
          title: { 
           display: true, 
           text: 'Custom Chart Title' 
          }, 
          legend: { 
           display:false, 
          }, 
          tooltips: { 
        mode: 'label', 


         }, 
       hover: { 
        mode: 'label' 
       }, 
       } 

      }); 

ответ

2

В Chart.js, массив цветов для backgroundColor и borderColor свойств являются для диаграмм бара типа, например, так как у вас есть различные элементы в графике (несколько баров).

В линейном типе у вас есть только один элемент (строка с заполнением ниже), поэтому вам нужно установить эти свойства одним цветом.


Если изменить эти свойства:

datasets: [{ 
    label: '# of Votes', 
    data: [12, 19, 3, 5, 2, 3], 
    backgroundColor: 'rgba(255, 99, 132, 0.2)', 
    borderColor: 'rgba(255,99,132,1)', 
    borderWidth: 1 
}] 

Вы получите следующий результат, который вы можете проверить at this fiddle:

enter image description here

+1

Спасибо человеку, я никогда бы не нашли это ответ. Думал, что это глобальная обстановка или что-то в этом роде. – LeBlaireau

+0

@LeBlaireau С удовольствием! Да, это не та информация, которую вы найдете в документации – tektiv

+0

Почему метки оси x не видны? –