Chart.js 2.0 - 如何更改 canvas/chart 元素的默认外观

Question

我正在使用新的 Chart.js 并尝试完成多项自定义设置。精通 JS 但不熟悉 canvas，我有点吃力。我会尽量提供更多的信息。

代码 - 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 轴上的网格线
删除数据集中第一项和最后一项与图表 left/right 边缘相交的点
插入 y 轴刻度标签
使 x 轴网格线叠加在线数据填充之上

屏幕截图

当前状态

期望状态（近似值）

任何帮助我指明正确方向的人都会很棒。 "Inspect Element" 上是否有 canvas 的等价物？这些修复在 CSS 中是微不足道的，但我不确定如何调试。

干杯

Answer 1

1.Remove the grid line up the y-axis

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

2.Remove the points on the first and last items of the dataset that meet the left/right edge of the chart

只需将数组而不是数字传递给 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.Inset the y-axis scale labels

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

4.Make x-axis grid lines overlay on top of the line data fill

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

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

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

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标签，你可以为options.scales.yAxes设置ticks.callback，像这样

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

请注意，只要您的比例在 suggestedMin 和 suggestedMax 范围内，它就可以工作。如果您的数据超出这些范围，则必须使用缩放属性。

要使 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();

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

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

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

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

Chart.js 2.0 - 如何更改 canvas/chart 元素的默认外观

Chart.js 2.0 - How to change default appearance of canvas/chart elements

javascript

jquery

canvas

chart.js

chart.js2

相关链接

代码 - JSBin

我想做什么

屏幕截图