Question

我正在尝试使用Chart.js显示自定义工具提示，具体取决于数据分类。
我想要显示：
1：工具提示1 2：工具提示2 3：工具提示2 以下是代码。

<script type="text/javascript" language="javascript">
    var pieData = [
           {
               value: parseInt(document.getElementById("<%= txtPendingCount.ClientID %>").value, 0),
               color: "#f5170a",                  
               highlight: "#f85248",
               label: "1"
          },
           {
               value: parseInt(document.getElementById("<%= txtCompletedCount.ClientID %>").value, 0),                   
               color: "#ce5e0c",                   
               highlight: "#cf7d40",
               label: "2"
           },
           {
               value: parseInt(document.getElementById("<%= txtWithheldCount.ClientID %>").value, 0),
               color: "#f4cd0c",                   
               highlight: "#f7de62",
               label: "3"
           }
   ];

    window.onload = function () {
        var ctx = document.getElementById("chart-area").getContext("2d");                       
        window.myPie = new Chart(ctx).Pie(pieData);
    };
</script>

有人可以建议怎么做吗？

感谢。

Answer 1

在示例中，您可以看到如何执行此操作，您可以注意到我使用了doughut但是使用饼图执行此操作的想法相同：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="chart-area" style="display:inline;"></canvas>

<script>
  var doughnutData = [
       {
        value: 200,
        color: "#FFF",
        label:"White",
      },
      {
        value: 200,
        color: "#bb2028",
        label:"Red",
      },          
      {
        value: 80,
        color: "#d97128"  ,
        label:"Orange",
      },
      {
        value: 40,
        color: "#fada09",
        label:"Yellow",
      },
      {
        value: 100,
        color: "#6bb345",          
        label:"Light Green",
      },
      {
        value: 60,
        color: "#b4aea7",
        label:"Gray",
      },
      {
        value: 200,
        color:"#2d5f2e",
        fillColor:"#2d5f2e",
        label:"Green",
      }
    ];

    window.onload = function(){
      var helpers = Chart.helpers;
      var canvas= document.getElementById("chart-area");
      var ctx = canvas.getContext("2d");
      var globalChartConfig = {
        responsive : true,
        tooltipTemplate: "<%if (label){%>Label Color: <%=label%>: <%}%> <%= value %>",
      }
      
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, globalChartConfig);      
                 
    };
  </script>

Chart.js中的自定义工具提示

1 个答案: