Добавьте текст Внутри подсказки

Цели:
Когда у меня есть курсор, чтобы отобразить всплывающую подсказку, я хотел бы добавить название месяца, а затем отображать номераДобавьте текст Внутри подсказки

Проблема:
Я не знаю, как сделать это в Chartjs версии 1

Информация:

угол Х Дата
Пожалуйста, помните, что название месяца будет меняться в зависимости от выбора пользователя из выпадающего списка. Месяц динамичен. Для того, чтобы данные были динамическими, у меня есть данные внутри поля ввода, а n будет отправлено на диаграмму JS.
Если возможно показать решение внутри JSBin или JSfiddle.
http://jsbin.com/mofeqavicu/edit?html,output

источник

2015-10-19 What' sUP

Я не уверен, что я правильно понимаю ваш вопрос, но метки определены в массиве

labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

, что вы можете изменить

labels: ['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6', 'Label 7', 8, 9, 10]

Вы n также определяют массив меток для использования в displayLineChart.

var myLabels = ['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6', 'Label 7', 8, 9, 10]; 
 

 
    function displayLineChart() { 
 
    var data = { 
 
     labels: myLabels, 
 
     datasets: [{ 
 
     label: "First dataset", 
 
     fillColor: "rgba(220,220,220,0.2)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
 
     }, { 
 
     label: "Second dataset", 
 
     fillColor: "rgba(151,187,205,0.2)", 
 
     strokeColor: "rgba(151,187,205,1)", 
 
     pointColor: "rgba(151,187,205,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(151,187,205,1)", 
 
     data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] 
 
     }] 
 
    }; 
 
    var ctx = document.getElementById("lineChart").getContext("2d"); 
 
    var options = {}; 
 
    var lineChart = new Chart(ctx).Line(data, options); 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 

 

 
<body onload="displayLineChart();"> 
 
    <div class="box"> 
 
    <canvas id="lineChart" height="450" width="800"></canvas> 
 
    </div> 
 
</body>

EDIT: манипулировать текст в подсказке вы можете определить шаблон в вариантах для графика. У вас есть возможности:

multiTooltipTemplate для нескольких наборов данных
tooltipTemplate для отдельных наборов данных

Для multiTooltipTemplate это не представляется возможным изменить название подсказки, если вы хотите сделать так, вам нужно определить свою собственную всплывающую подсказку. Это потому, что multiTooltipTemplate по умолчанию принимает в качестве заголовка подсказки метку оси x.

(источники: https://stackoverflow.com/a/28579665/2314737 и https://github.com/nnnick/Chart.js/issues/499)

Ниже приведен пример для одного набора данных:

var myLabels = [1,2,3,4,5,6,7,8,9,10]; 
 

 
    function displayLineChart() { 
 
    var data = { 
 
     labels: myLabels, 
 
     datasets: [{ 
 
     label: "First dataset", 
 
     fillColor: "rgba(220,220,220,0.2)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
 
     },] 
 
    }; 
 
    var ctx = document.getElementById("lineChart").getContext("2d"); 
 
    // define multiTooltip template 
 
    var options = { 
 
    multiTooltipTemplate: "My Text <%= datasetLabel %> - <%= value %>", 
 
    // tooltipTemplate is activated only when there's just one dataset 
 
    tooltipTemplate: "Label <%= label %>", 
 
    }; 
 
    
 
    var lineChart = new Chart(ctx).Line(data, options); 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
 

 
<body onload="displayLineChart();"> 
 
    <div class="box"> 
 
    <canvas id="lineChart" height="450" width="800"></canvas> 
 
    </div> 
 
</body>

источник

2015-10-19 13:12:12 user2314737

Спасибо за вашу помощь! Я хотел бы, чтобы число в столбце отображалось только, и когда у вас есть указатель на график, вы показываете номер с текстом «Ярлык». Я не хочу, чтобы в столбце отображался текст «Ярлык». В столбце должно быть указано только число.Сообщите, нужна ли вам дополнительная информация! –

Добавьте текст Внутри подсказки

ответ

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