添加一些裏面的文字工具提示的

目標：
當我有顯示光標時，我想的工具提示添加月份的名稱，然後你顯示數字添加一些裏面的文字工具提示的

問題：
我不知道如何做到這一點的Chartjs版本1

信息：

的X角度日期
請記住，一個月的名稱會根據用戶從下拉列表中選擇而改變。這個月是動態的。爲了使數據具有動態性，我在輸入框中輸入數據，並將其發送到Chart 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]

You ca 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>

編輯：操縱的工具提示文本您可以定義圖表的選項的模板。你有可能：

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

謝謝您的幫助！我想讓列中的數字只顯示，並且當您有圖形的光標時，然後用文本「標籤」顯示數字。我不希望文本「標籤」顯示在列中。只有數字在列中可見。請告訴你是否需要更多信息！ –

添加一些裏面的文字工具提示的

回答

相關問題