如何在 chart.js 2.7.2 中将条形图例转换为线形图例？答案

【问题标题】：如何在 chart.js 2.7.2 中将条形图例转换为线形图例？
【发布时间】：2022-01-23 10:18:27
【问题描述】：

我正在尝试使用 chart.js v2.7.2 创建折线图，如下所示：

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};


const config = {
  type: 'line',
  data: data,
};

const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

    
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
</html>

这是我在 JS Bin 上的代码：https://jsbin.com/kegedewiyi/edit?html,js,output

我希望将图例转换为线条而不是条形。

【问题讨论】：

标签： javascript html chart.js legend legend-properties

【解决方案1】：

我想通了。

我只需要使用pointStyle。

这是新的图表图像：

代码如下：

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
    pointStyle: "line",
  }]
};


const config = {
  type: 'line',
  data: data,
  options: {
    legend: {
      labels: {
        usePointStyle: true,
      }
    },
  }
};

const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>


<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
</html>

这里是JS Bin上的代码：https://jsbin.com/lolajokujo/edit?html,js,output

【讨论】：

【解决方案2】：

我已提供代码供您参考。参考链接以获得更多理解 https://www.chartjs.org/docs/2.7.3/configuration/legend.html https://www.chartjs.org/docs/latest/

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};


const config = {
  type: 'line',
  data: data,
options: {
    legend: {
        display: true,
        labels: {
            fontColor: 'rgb(255, 99, 132)'
        }
    }
}
};

const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

    
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
</html>

【讨论】：