底部和破折号的实线网格,chart.js

时间:2018-11-02 22:27:57

标签: typescript charts chart.js linechart

enter image description here

我正在使用chart.js和angular 5来构建折线图,并且尝试摆脱底部的虚线(350),并使之成为具有刻度线的虚线(2018年10月) ,知道如何做吗? 我希望背景轴像现在一样是虚线和灰色,但我希望底部轴是实心的。

this.chart = new Chart('chart', {
  type: 'line',
  data: {
    labels: this.labels,
    datasets: [
      {
        label: '',
        data: this.getPoints(),
        borderColor: this.BaseColor,
        backgroundColor: this.BaseColor,
        pointBackgroundColor: this.getBackground(),
        pointRadius: 6,
        pointBorderWidth: 3,
        pointHoverBackgroundColor: this.white,
        borderWidth: 3
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color:  this.GridColor,
          drawBorder: true,
          drawOnChartArea: false,
        }],
      yAxes: [{
        gridLines: {
          drawBorder: false,
          borderDash: [8, 4]]}
    showLines: true,
    elements: {
        line: {
            tension: .25,
            fill: false,
            borderColor: this.BaseColor,
            borderWidth: 3
        },
        point: {
            radius: 7,
            borderWidth: 0,
            hoverRadius: 7,
            hoverBorderWidth: 3,
            hitRadius: 7
        },
    },

0 个答案:

没有答案