javascript - Chart.js 2.0 - 如何更改画布/图表元素的默认外观

Question

我正在使用新的 Chart.js 并尝试完成一些自定义。精通 JS，但对画布很陌生，我有点挣扎。我会尽量提供尽可能多的信息。

代码 - JSBin

JavaScript

/**
 * Chart.js Global Config
 */
Chart.defaults.global.pointHitDetectionRadius = 5;
window.count = 0;




/**
 * Chart Data
 * @type {Object}
 */
var lineChartData = {
  labels: ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
  datasets: [{
    label: "Students",
    data: [ 200, 250,220,180,290,300,370,350,200,280,260,190,210, 200 ],
    backgroundColor: "rgba(247,155,45,1.0)",
    borderColor: "rgba(247,155,45,1.0)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    pointBorderColor: "rgba(245,245,245,1)",
    pointBackgroundColor: "rgba(80,81,81,1)",
    pointHoverBorderWidth: 5,
    pointBorderWidth: 5,
    pointRadius: 8,
    pointHoverRadius: 9,
    pointHitRadius: 8,
  }]
};



/**
 * Init
 */
window.onload = function() {

  var $chart = $('#chart');

  window.lineChart = new Chart($chart[0], {
    type: 'line',

    data: lineChartData,

    options: {
      showLines: true,

      // Legend
      legend : {
        display: false
      },

      // title
      title:{
        display:false,
        text:'Student Hours'
      },

      // Tooltips
      tooltips: {
        enabled: false,
      },

      // Scales
      scales: {
        yAxes: [{
          id: 'y-axis-0',
          gridLines: {
            display: true,
            lineWidth: 1,
            color: "rgba(255,255,255,0.85)"
          },
          ticks: {
            beginAtZero:true,
            mirror:false,
            suggestedMin: 0,
            suggestedMax: 500,
          },
          afterBuildTicks: function(chart) {

          }
        }],
        xAxes: [{
          id: 'x-axis-0',
          gridLines: {
            display: false
          },
          ticks: {
            beginAtZero: true
          }
        }]
      },
    }
  });

};

HTML

<!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.1.3/Chart.bundle.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

</head>
<body>
  <div id="chartjs-container" class="chartjs-wrap">
    <canvas id="chart"></canvas>
  </div>
</body>
</html>

CSS

#chartjs-container {
  width:80%;
  margin:20px auto;
  position: relative;
}

.chartjs-wrap {
  background-color: rgba(250, 210, 162, 1.0);
}

  canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    height:100%;
  }

我正在尝试做的事情

移除 y 轴上的网格线
删除数据集的第一项和最后一项上与图表左/右边缘相交的点
插入 y 轴刻度标签
使 x 轴网格线覆盖在线数据填充的顶部

截图

当前状态

期望状态（近似值）

任何为我指明正确方向的帮助都会很棒。画布的“检查元素”是否有等价物？这些修复在 CSS 中是微不足道的，但我不确定如何调试。

干杯

score 12 · Accepted Answer

1.删除y轴上的网格线

只需设置display为 false 即可options.scales.yAxes。这也将删除所有标签 - 我们将调用库方法在插件中绘制标签（不绘制 y 轴）（参见步骤 4）

2.删除数据集的第一项和最后一项上与图表左/右边缘相交的点

只需将数组传递给pointRadius而pointHoverRadius不是数字。以下数组将隐藏第一个和最后一个点（使用您的数据）

...
pointRadius: [0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0],
pointHoverRadius: [0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
...

如果您的数据长度是动态的，您可能必须使用脚本生成它。

3.插入y轴刻度标签

设置ticks.mirror为options.scales.yAxes真。然后插件（来自第 4 步）将只调用draw该比例的库方法。

4.使x轴网格线叠加在数据填充线上

要使 gridLines 出现（就像它一样）在填充上方但在点下方，最简单的方法是将其绘制在填充下方并将填充设置为稍微透明的值。

backgroundColor: "rgba(247,155,45,0.4)",

我们必须自己绘制网格线，因为我们不希望它们从边缘开始。所以设置gridLines.display为 falseoptions.scales.yAxes并注册以下插件

Chart.pluginService.register({
    afterDraw: function (chart, easingDecimal) {
        var yScale = chart.scales['y-axis-0'];
        var helpers = Chart.helpers;
        var chartArea = chart.chartArea;

        // draw labels - all we do is turn on display and call scale.draw
        yScale.options.display = true;
        yScale.draw.apply(yScale, [chartArea]);
        yScale.options.display = false;

        yScale.ctx.save();
            // draw under the fill
        yScale.ctx.globalCompositeOperation = 'destination-over';
        // draw the grid lines - simplified version of library code
        helpers.each(yScale.ticks, function (label, index) {
            if (label === undefined || label === null) {
                return;
            }

            var yLineValue = this.getPixelForTick(index);
            yLineValue += helpers.aliasPixel(this.ctx.lineWidth);

            this.ctx.lineWidth = this.options.gridLines.lineWidth;
            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';

            this.ctx.beginPath();
            this.ctx.moveTo(chartArea.left + 40, yLineValue);
            this.ctx.lineTo(chartArea.right, yLineValue);
            this.ctx.stroke();

        }, yScale);
        yScale.ctx.restore();
    },
})

将为所有图表调用插件。如果您想跳过某些图表的上述逻辑，您所要做的就是在options对象上设置一些属性并在运行逻辑之前检查它（例如yAxis.options.custom，与yAxis.options.display

如果你想隐藏 0 和 500 标签，你可以设置ticks.callbackfor options.scales.yAxes，像这样

callback: function(value) {
  if (value !== 0 && value !== 500)
    return '' + value;
},

请注意，只要您的比例在建议的最小值和建议的最大值内，它就可以工作。如果您的数据超出这些范围，则必须使用比例属性。

要使 x 轴标签背景为白色，只需将以下位添加到插件afterDraw方法的末尾

yScale.ctx.save();
yScale.ctx.fillStyle = 'white';
yScale.ctx.globalCompositeOperation = 'destination-over';
yScale.ctx.fillRect(0, yScale.bottom, chartArea.right, chartArea.bottom);
yScale.ctx.restore();

它只是在画布内容下绘制一个白色矩形。因为您的背景颜色是通过 CSS 设置的，所以矩形位于背景颜色之上，并且所有内容都是闪亮的。

您还必须将背景颜色从 .chartjs-wrap 移动到画布（否则底部会出现橙色边框）

canvas {
    background-color: rgba(250, 210, 162, 1.0);
    ...

您的 JSBin 的更新版本将应用上述所有内容 - http://jsbin.com/parucayara/1/edit?output

javascript - Chart.js 2.0 - 如何更改画布/图表元素的默认外观

相关链接

代码 - JSBin

我正在尝试做的事情

截图

1 回答 1

javascript - Chart.js 2.0 - 如何更改画布/图表元素的默认外观

相关链接

代码 - JSBin

我正在尝试做的事情

截图

1 回答 1

Related

Reference