Question

是什么原因造成的？？谢谢！

  var chartData = {
    labels: labels,
    datasets: [{
      backgroundColor: 'rgba(54, 163, 247, 0.6)',
      borderColor: 'rgba(54, 163, 247, 1)',
      data: dataset,
      pointBorderWidth: 0,
      pointRadius: 0,
      borderWidth: 0,
      pointHoverRadius: 0,
      pointHoverBackgroundColor: mUtil.getColor('danger')
    }]
  };

  var chartContainer = $(canvas_id);

  if (chartContainer.length == 0) {
    return;
  }

  var annotations = [];
  if (annos !== undefined) {
    var keys = Object.keys(annos);
    for (var key in keys) {
      annotations.push({
        type: "line",
        mode: "vertical",
        scaleID: "x-axis-0",
        value: keys[key],
        borderColor: mUtil.getColor('warning'),
        borderDash: [2, 2],
        onClick: function(e) {

        },
        label: {
          backgroundColor: mUtil.getColor('warning'),
          fontSize: 10,
          fontColor: "#000",
          content: "PUBLISHED",
          enabled: true,
          position: "top"
        }
      });
    }
  }

  var chart = new Chart(chartContainer, {
    type: chartType,
    data: chartData,
    options: {
      annotation: {
        events: ['click'],
        annotations: annotations
      },
      title: {
        display: false,
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            return numeral(tooltipItem.yLabel).format("0,0");
          }
        }
      },
      legend: {
        display: false
      },
      responsive: true,
      maintainAspectRatio: false,
      barRadius: 0,
      scales: {
        xAxes: [{
          display: true,
          gridLines: false,
          stacked: false,
          bounds: 'ticks',
          ticks: {
            // maxRotation: 90,
            // minRotation: 90,
            autoSkip: true,
          },
          gridLines: {
            drawTicks: true
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: isZero !== undefined && isZero,
            callback: function(tick, index, ticks) {
              return numeral(tick).format('0,0a');
            }
          },
          display: true,
          stacked: false,
          gridLines: {
            display: true,
          }
        }]
      },
      layout: {
        padding: {
          left: 0,
          // right: 10,
          top: 0,
          bottom: 0
        }
      }
    }
  });

Answer 1

我遇到了同样的问题。垂直和水平条上的负条变成双凹条（弯曲的边）我通过升级到Chart.js（2.7.3）的最新版本来修复了该问题

Chart.js反转条时负值

1 个答案: