Question

所以我使用Chart.js在我的网络应用上绘制图形，我想要实现的是控制图形本身的起点，这样我就可以控制尺度的位置

这是我到目前为止所做的：

最终，我试图让比例出现在每个“条纹”的中心。我在文档中看到你可以扩展比例和图表来根据自己的需要进行自定义，但是我试图摆弄它并没有成功地满足我的需求。

这是我想要实现的一个例子：

代码：

var type = 'line';
var daysArray = new Array(30).join().split(',').map(function (item, index) { ++index; return (index % 5 == 0 || index == 1) ? index : '' })
var data = {
    labels: this.daysArray,
    datasets: [{
        borderColor: "#707bbb",
        showLine: false,
        fill: false,
        pointBackgroundColor: "#707bbb",
        pointRadius: 3,
        data: [65, 59, 80, 81, 56, 20, 32, 65, 59, 80, 81, 56, 20, 32]
    },
        {
            borderColor: "#2972c5",
            borderWidth: 1,
            fill: false,
            pointRadius: 0,
            data: [102, 42, 36, 98, 15, 15, 19, 65, 59, 80, 81, 56, 20, 32]
        }
    ]
};

var options = {
    bezierCurve: false,
    responsive: true,
    maintainAspectRatio: false,
    display: false,
    scales: {
        yAxes: [{
            display: false
        }],
        xAxes: [{
            gridLines: {
                drawOnChartArea: true,
                drawBorder: false
            },
            ticks: {
                fontStyle: "normal",
                maxRotation: 0,
                labelOffset: 1
            }
        }]
    },
    legend: {
        display: false
    }
};

Chart.pluginService.register({
      beforeDatasetsDraw: function (chart, easing) {
        if (chart.chartArea) {

          var noOfLabels = chart.chart.config.data.labels.length;
          var helpers = Chart.helpers;
          var ctx = chart.chart.ctx;
          //
          ctx.save();
          var chartArea = chart.chartArea;
          var chartWidth = chartArea.right - chartArea.left;
          var chartHeight = Math.abs(chartArea.top - chartArea.bottom);

          var stripWidth = chartWidth / noOfLabels;
          var pattern = document.createElement('canvas');
          pattern.width = stripWidth * 2;
          pattern.height = chartHeight;
          var pctx = pattern.getContext('2d');

          pctx.fillStyle = "#f0f2f5";
          pctx.fillRect(0, 0, stripWidth, chartHeight);
          pctx.fillStyle = "#ffffff";
          pctx.fillRect(stripWidth, 0, stripWidth, chartHeight);

          var ptr = ctx.createPattern(pattern, "repeat");
          ctx.fillStyle = ptr;

          ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
          ctx.restore();
          ctx.save();
        }


      },


    });

    Chart.scaleService.getScaleConstructor("category").extend({
      margins: {
        left: 100
      },
      paddingLeft: 300
    });

    this.chart = new Chart(document.querySelector('canvas'), {
      type: type,
      data: data,
      options: options
    });

代码有点乱，因为我试着玩一些选项，并认为我会把它留在那里

任何人都知道该怎么做？

Chart.js - 更改比例/线的起始位置

0 个答案: