添加图标和自定义工具提示 - y轴 - chartjs

时间:2018-05-29 15:42:28

标签: javascript chart.js

我正在使用chart.js构建图表。我想在y轴标签中添加一个fontawesome图标。

我尝试添加 - labelString: 'Range<i class="fa fa-question-circle" aria-hidden="true"></i>',但似乎无效。在悬停此图标时,我还想添加工具提示。

如何添加此图标?

以下是代码:

var canvas = document.getElementById('myChart');
var data = {
    labels: ["Jan", "1", "2", "3", "4", "5", "Feb"],
    datasets: [
        {
            label: "data",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [65, 59, 80, 0, 56, 55, 40],
        }
    ]
};

function adddata(){
    myLineChart.data.datasets[0].data[7] = 60;
  myLineChart.data.labels[7] = "Newly Added";
  myLineChart.update();
}

var option = {
    showLines: true,
  legend: {
    display: false
  },
  title: {
    display: false,
  },
  scales: {
    yAxes: [ {
        scaleLabel: {
        display: true, labelString: 'Range'
      },
      gridLines: {
        drawTicks: false, display: true
      }
    }],
    xAxes: [ {
        scaleLabel: {
        display: true, labelString: 'Last 30 days'
      },
      ticks: {
        min: 0, max: 15, stepSize: 5
      }
    }]
  }

};
var myLineChart = Chart.Line(canvas,{
    data:data,
  options:option
});

这是我的图表:https://jsfiddle.net/9mg8c6zL/1/

0 个答案:

没有答案