Question

目标：
当我有光标显示工具提示时，我想添加月份名称，然后显示数字

问题：
我不知道如何在Chartjs版本1

中做到这一点

的信息：

X角度为日期
请记住，月份名称将根据用户从下拉列表中的选择进行更改。这个月是动态的。为了使数据具有动态性，我在输入框内部有数据，并且它将被发送到Chart JS。
如果可能在JSBin或JSfiddle中显示解决方案。
http://jsbin.com/mofeqavicu/edit?html,output

Answer 1

我不确定我是否理解你的问题，但标签是在数组中定义的

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]

您还可以定义要在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>

在工具提示中添加一些文本

1 个答案: