将图例样式从bar更改为line chart.js 2.4.0

时间:2018-06-15 08:36:40

标签: javascript angular angular5 chart.js

enter image description here我正在使用chart.js(2.4.0)作为图表,我需要将图例样式从条形更改为线条,我无法做到这一点。

如何将符号从一个符号更改为一行。

以下是我的代码

renderChart(id, labels, label1, label2, data1, data2, borderDash = [], pointRadius = 3, backgroundColor = '#36a1eb') {
data2 = data2 || [];
const options = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{

        fill: false,
        lineTension: 0.1,
        backgroundColor: backgroundColor,
        borderColor: '#36a1eb',
        lineColor: '#36a1eb',
        strokeColor: '#36a1eb',
        borderCapStyle: 'butt',
        borderDash: borderDash,
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: '#36a1eb',
        pointBackgroundColor: '#36a1eb',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: '#36a1eb',
        pointHoverBorderColor: '#36a1eb',
        pointHoverBorderWidth: 2,
        pointRadius: pointRadius,
        pointHitRadius: 10,
        label: label2,
        data: data2,
        borderWidth: 2

    }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false,
          beginAtZero: false
        },
          scaleLabel: {
              display: true,
              labelString: 'Value'
          }
      }],

        xAxes: [{

          ticks: {
            reverse: false,
            beginAtZero: false
          },
            scaleLabel: {
                display: true,
                labelString: 'Date'
            }
        }],
    }
  }
};

我该怎么做? 我搜索了chart.js的所有文档,但仍然无法将其修改为行。

1 个答案:

答案 0 :(得分:0)

配置选项位于 https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

您是否尝试过boxWidthusePointStyle