当前位置: 首页 > 知识库问答 >
问题:

如何更改图例标签而不影响我的工具提示标签?

宗沛
2023-03-14

我正在设法找到解决我问题的办法。我已将图例标签改为第25-75个百分位。这是正确的。但是,当我悬停在线上的时候,问题就出现了。当我在上面的时候应该是75百分位,而不是25-75百分位。这是一个我还想不明白的问题。我希望你能帮帮我。另外,我想为每一行做这一点,所以万一我有第10-90个百分位。我想悬停在两条线上,得到第90百分位或第10百分位。我还在此附加了imageenter图像描述

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="mychart2" width="500" height="500"></canvas>
        <script>
        var canvas = document.getElementById("mychart2");
                var ctx = canvas.getContext('2d');
            const decimals = 0;
            var config = {              //configure the chart
                type: 'line',
                data: {
                    labels: ['0', '1', '2', '3','4','5','6','7','8','9+'],
                    datasets: [{
                        label: "25th Percentile",
                        showInLegend: true,
                        backgroundColor: '#c4c1ff',
                        pointBackgroundColor:"#645bff",
                        borderColor: '#645bff',
                        fill: 4,
                        pointRadius:0,
                        pointBorderWidth:3,
                        pointHoverRadius:3,
                        pointHitRadius:3,//no fill here
                        data: [28, 35, 40, 45,50,55,62,66,70,78]
                    },{
                        label: "90th Percentile",
                        backgroundColor: '#c4c1ff',
                        pointBackgroundColor:"#c4c1ff",
                        borderColor: '#c4c1ff',
                        pointHoverBackgroundColor:"#c4c1ff",
                        pointHoverBorderColor: "#c4c1ff",
                        borderWidth:1,
                        pointRadius:0,
                        pointBorderWidth:3,
                        pointHoverRadius:3,
                        pointHitRadius:3,
                        fill: 3, 
                        //no fill here
                        data: [40, 65, 63, 64,72,79,83,87,100,108]
                    },{
                        label: "Median",
                        backgroundColor: '#0d0e25',
                        pointBackgroundColor:"#0d0e25",
                        borderColor: '#0d0e25',
                        borderWidth:1,
                        pointRadius:2,
                        pointBorderWidth:3,
                        pointHoverRadius:3,
                        pointHitRadius:3,
                        fill: false,  //no fill here
                        data: [30, 40, 45, 50, 56, 60, 66,73 ,78,85]},
                    {
                        label: "25th - 75th Percentile",
                        tooltipTitle:"75th Percentile",
                        showInLegend: false,
                        backgroundColor: '#645bff',
                        pointBackgroundColor:"#645bff",
                        borderColor: '#645bff',
                        pointRadius:0,
                        lineTension: 0.1,
                        pointBorderWidth:3,
                        pointHoverRadius:3,
                        pointHitRadius:3,
                        borderCapStyle: 'butt',
                                        borderDash: [],
                                        borderDashOffset: 0.0,
                                        borderJoinStyle: 'miter',
                        fill:0 ,
                        //fill until previous dataset
                        data: [35, 50, 51, 55,63,69,73,80,85,94]
                    },{
                        label: "10th Percentile",
                        backgroundColor: "#c4c1ff",
                        pointBackgroundColor:"#c4c1ff",
                        pointHoverBackgroundColor:"#c4c1ff",
                        pointHoverBorderColor: "#c4c1ff",
                        borderColor: "#c4c1ff",
                        pointStyle:"circle",
                        borderWidth:1,
                        lineWidth:1,
                        hoverRadius:9,
                        pointRadius:0,
                        pointBorderWidth:3,
                        pointHoverRadius:3,
                        pointHitRadius:3,
                        lineTension:0.3,
                       
                        fill: '0', //fill until previous dataset
                        data: [25, 30, 36, 39, 45, 49, 53,56,60,68]
                    }]
                },
                options: {title: {display:true, text: 'Frontend Engineer salaries (753 datapoints)',fontSize:20},
                    maintainAspectRatio: false,
                    legend: {onClick: (e) => e.stopPropagation(),display:true, labels: {filter:function(item,
                    mychart2)
                    {return !item.text.includes("10th - 90th Percentile" & "10th Percentile");}}},
                    spanGaps: false,
                    elements: {
                        line: {
                            tension: 0.000001
                        }
                    },
                    plugins: {
                        filler: {
                            propagate: false
                        }
                    },
                    scales: {
                        yAxes: [{gridLines: {display:false}, scaleLabel: {display: true, labelString: 'Salary', 
                        fontSize:20},
                            ticks: {beginAtZero:true, stepSize: 20,callback: function(value, index, values) {
                        return '$' + value.toFixed(decimals)}
                            }
                        }], xAxes: [{gridLines: {display:false},
                            ticks: {beginAtZero:true, stepSize: 20,
                                
                            }, scaleLabel: {
                     display: true,
                     labelString: 'Years of relevant experience',
                     fontSize: 20 }
                        }]
                    }
                }
            };
            var chart = new Chart(ctx, config);
        </script>

共有1个答案

国俊艾
2023-03-14

tooltiptitle不是Chart.js中的属性。要调整标题,您必须实现如下所示的自定义回调:

options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].label || '';
            if (label) {
              label += ': ';
            }
            if (label === "25th - 75th Percentile: ") {
              label = "75th Percentile: "
            }
            if (label === "10th - 90th Percentile: ") {
              label = "90th Percentile: "
            }
            label += tooltipItem.yLabel
            return label;
          }
        }
      }
}

示例:

null

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<canvas id="mychart2" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById("mychart2");
  var ctx = canvas.getContext('2d');
  const decimals = 0;
  var config = { //configure the chart
    type: 'line',
    data: {
      labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'],
      datasets: [{
          label: "25th Percentile",
          showInLegend: true,
          backgroundColor: '#c4c1ff',
          pointBackgroundColor: "#645bff",
          borderColor: '#645bff',
          fill: 4,
          pointRadius: 0,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3, //no fill here
          data: [28, 35, 40, 45, 50, 55, 62, 66, 70, 78]
        }, {
          label: "90th Percentile",
          backgroundColor: '#c4c1ff',
          pointBackgroundColor: "#c4c1ff",
          borderColor: '#c4c1ff',
          pointHoverBackgroundColor: "#c4c1ff",
          pointHoverBorderColor: "#c4c1ff",
          borderWidth: 1,
          pointRadius: 0,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          fill: 3,
          //no fill here
          data: [40, 65, 63, 64, 72, 79, 83, 87, 100, 108]
        }, {
          label: "Median",
          backgroundColor: '#0d0e25',
          pointBackgroundColor: "#0d0e25",
          borderColor: '#0d0e25',
          borderWidth: 1,
          pointRadius: 2,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          fill: false, //no fill here
          data: [30, 40, 45, 50, 56, 60, 66, 73, 78, 85]
        },
        {
          label: "25th - 75th Percentile",
          showInLegend: false,
          backgroundColor: '#645bff',
          pointBackgroundColor: "#645bff",
          borderColor: '#645bff',
          pointRadius: 0,
          lineTension: 0.1,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          fill: 0,
          //fill until previous dataset
          data: [35, 50, 51, 55, 63, 69, 73, 80, 85, 94]
        }, {
          label: "10th Percentile",
          backgroundColor: "#c4c1ff",
          pointBackgroundColor: "#c4c1ff",
          pointHoverBackgroundColor: "#c4c1ff",
          pointHoverBorderColor: "#c4c1ff",
          borderColor: "#c4c1ff",
          pointStyle: "circle",
          borderWidth: 1,
          lineWidth: 1,
          hoverRadius: 9,
          pointRadius: 0,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          lineTension: 0.3,

          fill: '0', //fill until previous dataset
          data: [25, 30, 36, 39, 45, 49, 53, 56, 60, 68]
        }
      ]
    },
    options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].label || '';
            if (label) {
              label += ': ';
            }
            if (label === "25th - 75th Percentile: ") {
              label = "75th Percentile: "
            }
            label += tooltipItem.yLabel
            return label;
          }
        }
      },
      title: {
        display: true,
        text: 'Frontend Engineer salaries (753 datapoints)',
        fontSize: 20
      },
      maintainAspectRatio: false,
      legend: {
        onClick: (e) => e.stopPropagation(),
        display: true,
        labels: {
          filter: function(item,
            mychart2) {
            return !item.text.includes("10th - 90th Percentile" & "10th Percentile");
          }
        }
      },
      spanGaps: false,
      elements: {
        line: {
          tension: 0.000001
        }
      },
      plugins: {
        filler: {
          propagate: false
        }
      },
      scales: {
        yAxes: [{
          gridLines: {
            display: false
          },
          scaleLabel: {
            display: true,
            labelString: 'Salary',
            fontSize: 20
          },
          ticks: {
            beginAtZero: true,
            stepSize: 20,
            callback: function(value, index, values) {
              return '$' + value.toFixed(decimals)
            }
          }
        }],
        xAxes: [{
          gridLines: {
            display: false
          },
          ticks: {
            beginAtZero: true,
            stepSize: 20,

          },
          scaleLabel: {
            display: true,
            labelString: 'Years of relevant experience',
            fontSize: 20
          }
        }]
      }
    }
  };
  var chart = new Chart(ctx, config);
</script>
 类似资料:
  • 我刚开始使用,我已经创建了一个具有排序功能的表,但我需要更改排序器工具提示上的文本。 分类器工具提示:- 谢谢你,如果你需要任何额外的代码片段,请让我知道。

  • 我使用的是chart.bundle.min.js 2.3.0。

  • 如果我的标签包含文本太长,并且当我用鼠标悬停在标签上时,我想要一个显示整个标签文本的工具提示。是否可以在 SceneBuilder 中执行此操作,或者我必须以编程方式对所有标注执行此操作?

  • 我用的是Android系统。支持v7。小装置。从这篇文章中学习了如何将汉堡包图标的颜色更改为白色,但当我调用时,向上/向后箭头仍然是黑色 我怎样才能使箭头也变成白色? 下面是我的工具栏看起来像当我调用setDisplayHomeAsUpEn的(): ...这是我风格的相关部分。xml文件:

  • 当我通过eclipse启动时,这会显示图标,但当我将其导出到Runnable Jar时,它会显示默认的Java图标,我不想使用资源的方式来做这件事,因为它甚至在IDE中不起作用。

  • 我使用这个回调函数来检查图表的悬停部分是否有标签: 但工具提示箭头继续出现。我该如何移除它? https://codepen.io/marcelo2605/pen/vWxyBL