Question

我已经使用Chart JS创建了一个图表，正如您在fiddle中看到的那样。此图表中有三行。我希望橙色和黄色线比现在更厚。绿色虚线很好。

我已经四处搜寻，并尝试了一些东西。但我还没有找到合适的解决方案。我希望我的问题很清楚，有人可以帮我解决这个问题。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js" charset="utf-8"></script>
<canvas id="canvas2"></canvas>

的JavaScript

Chart.defaults.global.legend.display = false;
var lineChartData = {
labels: ['20°', '30°', '40°', '50°', '60°', '70°', '80°'],
datasets: [{
  data: [null, null, null, 400, 320, 220, 90],
  pointBorderColor: "rgba(75,192,192,1)",
  pointBackgroundColor: "#fff",
  borderColor: '#FFEC8B',
  pointBorderWidth: 0,
  pointHoverRadius: 0,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 0,
  lineWidth: 100,
  pointRadius: 0,
  pointHitRadius: 0,
},{
  data: [550, 520, 470, 400, null, null, null],
  borderColor: '#ff8800',
  pointBorderWidth: 0,
  pointHoverRadius: 0,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 0,
  pointRadius: 0,
  pointHitRadius: 0,
},
{
    data: [220, 220, 220, 220, 220, 220, 220],
    borderColor: '#008080',
    borderDash: [10, 10],
    pointBorderWidth: 0,
    pointHoverRadius: 0,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 0,
    pointRadius: 0,
    pointHitRadius: 0,
  }
]
};

var ctx = document.getElementById("canvas2").getContext("2d");
var myChart = new Chart(ctx, {
 type: "line",
 beginAtZero: true,
 scaleOverride:true,
 scaleSteps:9,
 scaleStartValue:0,
 lineWidth: 100,
 scaleStepWidth:100,
 data: lineChartData,
 options: {
    elements: {
        line: {
            fill: false
        }
    },
    style: {
      strokewidth: 10
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Temperatuur - Celcius'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
            max: 600,
            min: 0,
            stepSize: 200,
            userCallback: function(value, index, values) {
                value = value.toString();
                value = value.split(/(?=(?:...)*$)/);
                value = value.join('.');
                return value + '%';
              }
        },
        scaleLabel: {
          display: true,
          labelString: 'Rendement'
        }
      }]
    }
  }
})

Answer 1

你接近它了！
实际上，您必须编辑的属性不是lineWidth而是borderWidth（在Chart.js文档的first example中，您可以看到该属性）。

<小时/> 正如the example的MDN文档lineTo中所述：

使用beginPath（）开始绘制线条的路径，使用moveTo（）移动笔并使用stroke（）方法实际绘制线条。

该线基本上是一个宽度为0的矩形。然后使用矩形边框宽度计算线条的宽度。

<小时/> 因此，您只需以这种方式编辑数据集：

datasets: [{
    // ...
    borderWidth: 1 // and not lineWidth
    // ...
}]

我也有updated your fiddle编辑，你可以看到它现在正在运作。

Answer 2

如果这有帮助，或者您仍然可以将此方法识别为可使用的方法，则可以将边框宽度设置得较高，例如50。

  rowNode = this.gridApi.getRowNode(`${updatedRecord.id}`);
  rowNode.updateData(updatedRecord);

您在文档https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration上检查了datasets:[{ borderWidth: 50 }] //at your options put this options: { legend: { display: true, labels: { fontSize: 16, //point style's size is based on font style not boxed width. usePointStyle:true, } }

如何使Chart JS中的两行变粗

2 个答案: