如何在Chartjs中删除幻影线?

时间:2019-08-06 05:14:00

标签: reactjs chart.js

我有一个多轴时间轴图表。某些yax从时间序列中间某个位置的非零值开始。我注意到这些数据集在图表上出现了幻影线。

我尝试将beginAtZero属性设置为false(无论如何都是默认值)

我如何摆脱它们?

这是一个代码段,其中显示了chart options对象的datachart属性。

let chartPropertyOptions = {
  scales: {
    xAxes: [
      {
        type: 'time',
        display: true,
        distribution: 'linear',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'DD MMM YYYY'
          }
        },
        scaleLabel: {
          display: true,
          labelString: 'Date',
          fontSize: 16
        },
        gridLines: {
          display: false
        },
        display: false,
        id: 'date'
      }
    ],
    yAxes: [
      {
        id: 'axis0',
        scaleLabel: {
          display: true,
          labelString: 'Axis 0',
          fontSize: 16
        },
        gridLines: {
          display: false
        },
        stacked: true,
        position: 'right',
        ticks: {
          max: 40,
          min: 5
        }
      },
      {
        id: 'axis1',
        scaleLabel: {
          display: true,
          labelString: 'Axis 1',
          fontSize: 16
        },
        gridLines: {
          display: false
        },
        stacked: true,
        position: 'right',
        ticks: {
          max: 40,
          min: 5,
          beginAtZero: false
        },
        display: false,
      },
      {
        id: 'axis2',
        scaleLabel: {
          display: true,
          labelString: 'Axis 2',
          fontSize: 16
        },
        gridLines: {
          display: false
        },
        stacked: true,
        position: 'right',
        ticks: {
          max: 40,
          min: 5
        },
        display: false,
      },
      {
        id: 'axis3',
        scaleLabel: {
          display: true,
          labelString: 'Axis 3',
          fontSize: 16
        },
        gridLines: {
          display: false
        },
        stacked: true,
        position: 'left',
        ticks: {
          max: 40,
          min: 5
        },
        display: false,
      },
      {
        id: 'axis4',
        scaleLabel: {
          display: true,
          labelString: 'Axis 4',
          fontSize: 16
        },
        gridLines: {
          display: false
        },
        stacked: true,
        position: 'right',
      }
    ]
  },
  maintainAspectRatio: true,
  responsive: true
};
let data = {
            labels: response.data.map(a => a.date),
            xAxisId: 'date',
            datasets: [
              {
                label: 'Axis 0',
                data: response.data.map(a => a.v1),
                lineTension: 0,
                fill: false,
                yAxisID: 'yaxis0',
                borderColor: '#fe8b36',
              },
              {
                label: 'Axis 1',
                data: response.data.map(a => {
                  let result = a.v1_mean + a.v1_std*2;
                  return result;
                }),
                lineTension: 0,
                fill: false,
                yAxisID: 'yaxis1',
                borderColor: '#ff0000',
              },
              {
                label: 'Axis 2',
                data: response.data.map(a => {
                  let result = a.v1_mean - a.v1_std*2;
                  return result
                }),
                lineTension: 0,
                fill: false,
                yAxisID: 'yaxis2',
                borderColor: '#002ef4',
              },
              {
                label: 'Axis 3',
                data: response.data.map(a => a.v1_mean),
                lineTension: 0,
                fill: false,
                yAxisID: 'yaxis3',
                borderColor: '#a06ee4',
              },
              {
                label: 'Axis 4',
                data: response.data.map(a => a.v2),
                lineTension: 0,
                fill: false,
                yAxisID: 'yaxis4',
                borderColor: '#a43fe4',
              }
            ]
          };

let chart = new Chart(myChartRef, {
            type: 'line',
            data: data,
            options: chartPropertyOptions
          });

Ghost lines when yaxis values start at non zero.

0 个答案:

没有答案