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

Question

我正在尝试使用 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

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

Answer 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

Answer 2

我已经提供了代码供您参考。参考link以获得更多理解 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>

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

How to convert a bar legend to line legend in chart.js 2.7.2?

html

javascript

legend

legend-properties

chart.js