Multiline Chartjs导致无法区分具有相同数据的多行问题

Posted 2023-03-25

【中文标题】Multiline Chartjs导致无法区分具有相同数据的多行问题

【英文标题】：Multiline Chartjs causes issue multiple lines with same data cannot be differentiated

【发布时间】：2021-09-23 03:50:44

【问题描述】：

我正在使用 Chartjs 显示一个多线图。 这里的许多行包含相同的数据，因此我无法区分它们。即使我为不同的线保留不同的颜色，我也看不出任何区别，因为它们都相互重叠。 至少将鼠标悬停在我希望显示所有行的数据的点上，但仅显示顶部线上的数据。如何理解/查看后面行中的数据（首先如何知道所有行都在后面）。 （忽略下面给出的 sn-p 中的脚本错误）

var speedCanvas = document.getElementById("speedChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var dataFirst = 
    label: "Car A - Speed (mph)",
    data: [0, 59, 75, 20, 20, 55, 40],
    lineTension: 0,
    fill: false,
    borderColor: 'red'
  ;

var dataSecond = 
    label: "Car B - Speed (mph)",
    data: [0, 59, 75, 20, 20, 55, 40],
    lineTension: 0,
    fill: false,
  borderColor: 'blue'
  ;

var speedData = 
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
;

var chartOptions = 
  legend: 
    display: true,
    position: 'top',
    labels: 
      boxWidth: 80,
      fontColor: 'black'
    
  
;

var lineChart = new Chart(speedCanvas, 
  type: 'line',
  data: speedData,
  options: chartOptions
);

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="resources/sources/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<canvas id="speedChart"  ></canvas>

【参考方案1】：

要一次查看所有 x 轴数据，您可以在工具提示部分添加以下配置

mode: 'index'

您还可以添加配置，使其看起来像下面这样

intersect: false,
position: 'nearest'

在你的情况下，你的选项看起来像这样

var chartOptions = 
legend: 
    display: true,
    position: 'top',
    labels: 
       boxWidth: 80,
       fontColor: 'black'
    
  ,
 tooltips:
        mode: 'index',
        intersect: false,
        position: 'nearest'
 
;

【讨论】：

能否分享一些代码 sn-p 请我对 chartjs 很陌生，通常对配置感到困惑

为您的案例更改了图表选项@Supritha.M.Bhatt

谢谢@Hardik Uchdadiya，但是当我悬停时，您的代码有助于获取 x 轴详细信息，但我需要隐藏在此（可见红色）线后面的线的详细信息，因为它们具有相同的数据我想知道可见线后面的所有线

@Supritha.M.Bhatt - 我想你正在寻找这个 - chartjs.org/docs/latest/samples/line/interpolation.html

谢谢。但不，那不是我要找的。感谢您的帮助