相关疑难解决方法(0)

我正在使用chart.js(V2)来尝试构建一个条形图,其中包含更多可供用户使用的信息,而无需将鼠标悬停在任何地方或单击任何位置.我提供了两个我希望如何编辑图表的例子.

我希望实现的两个编辑版本

可以看出,我希望(在某处)放置标签之外的一些额外信息.我希望通过在标签上添加'\n',我可能能够获得与选项A类似的内容.

一些编辑的代码提供了打击:

var barChartData = {

        labels: playerNames,
        datasets: [{
            label: 'Actual Score/Hour',
            backgroundColor: "rgba(0, 128, 0,0.5)",
            data: playerScores
          }, {
            label: 'Expected Score/Hour',
            backgroundColor: "rgba(255,0,0,0.5)",
            data: playerExpected
        }]
    };
function open_win(linktosite) {
           window.open(linktosite)
      }
        canvas.onclick = function(evt){
            var activePoints = myBar.getElementsAtEvent(evt);
            console.log(activePoints);
            linktosite = 'https://www.mytestsite.com/' + activePoints[1]['_model']['label'];
            open_win(linktosite);
}; 
window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title:{
                    display:true,
                    text:"Player Expected and Actual Score per Hour" …

我用Chart.js创建了一个圆环图,我希望它的两端都有圆角.我希望它是这样的:

但我喜欢这样,有锋利的边缘:

我找到的最好的答案是:如何在Chart.js条形图上放置圆角,但它是用于条形图,我不知道如何为甜甜圈调整它.

这是我的代码:

HTML

<div class="modal-div-canvas js-chart">
  <div class="chart-canvas">
     <canvas id="openedCanvas" width="1" height="1"></canvas>
        <div class="chart-background"></div>
            <span class="chart-unique-value">
                 <span class="js-count">
                    85
                 </span>
                 <span class="cuv-percent">%</span>
            </span>
        </div>
  </div>

JS

var deliveredData = {
        labels: [
            "Value"
        ],
        datasets: [
            {
                data: [85, 15)],
                backgroundColor: [
                    "#3ec556",
                    "rgba(0,0,0,0)"
                ],
                hoverBackgroundColor: [
                    "#3ec556",
                    "rgba(0,0,0,0)"
                ],
                borderWidth: [
                    0, 0
                ]
            }]
    };

    var deliveredOpt = {
        cutoutPercentage: 88,
        animation: {
            animationRotate: true,
            duration: 2000
        },
        legend: {
            display: false
        },
        tooltips: …

我有一个使用Chart.js的网页.在这个页面中,我正在渲染三个圆环图.在每个图表的中间,我想显示填充的甜甜圈的百分比.目前,我有以下代码,可以在这个小提琴中看到.

function setupChart(chartId, progress) {
  var canvas = document.getElementById(chartId);
  var context = canvas.getContext('2d');

  var remaining = 100 - progress;
  var data = {
    labels: [ 'Progress', '', ],
    datasets: [{
      data: [progress, remaining],
      backgroundColor: [
        '#8FF400',
        '#FFFFFF'
      ],
      borderColor: [
        '#8FF400',
        '#408A00'
      ],
      hoverBackgroundColor: [
        '#8FF400',
        '#FFFFFF'
      ]
    }]
  };

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    scaleShowVerticalLines: false,

    cutoutPercentage: 80,
    legend: {
      display: false
    },
    animation: {
      onComplete: function () {
        var xCenter = (canvas.width / …

在chartjs github页面上的人们的帮助下，我得到了一个分组堆积条形图。实施很棒，并帮助我构建了我正在寻找的图表类型。我现在要添加的是一个标签来表示每个堆栈是什么。

这是我正在进行的 JS 小提琴：http : //jsfiddle.net/4rjge8sk/1/

我当前的数据集看起来像这样，我想制定一个聪明的解决方案，我可以像这样将堆栈标签添加到数据集中：

datasets: [
    {
      label: "Apples",
      backgroundColor: "rgba(99,255,132,0.2)",
      data: [20, 10, 30],
      stack: 1,
      stackLabel: "Stack 1"
    }

这是我尝试使用堆栈标签构建的预期结果：

我还不太擅长为 ChartJS 编写插件，但我想了解如何用它多画一点。谢谢你的帮助。

我有一个包含多个数据集的常规 Chartjs 圆环图，对数据集使用以下代码：

datasets: 
    [
        {
            label: 'Bugs',
            data: [ 60 , 6.6666666666667 , 33.333333333333 ],
            backgroundColor: ['#25CFE4', '#92E7F1', '#eeeeee'],
        }, {
            label: 'Fixes',
            data: [ 60 , 0.44444444444444 , 39.555555555556 ],
            backgroundColor: ['#514463', '#8C75AB', '#eeeeee'],
        }, {
            label: 'Redesigns',
            data: [
            33.333333333333 , 10.37037037037 , 56.296296296296 ],
            backgroundColor: ['#1B745F', '#40C1A0', '#eeeeee'],
        }
    ]
};

我正在尝试在秤上实现圆形边缘，我成功地完成了第一轮，但其他轮则没有运气。

基本上，这就是我现在所拥有的

这就是我想要实现的目标（对不起可怜的Photoshop）

我不介意刻度的开头是否也是圆形的，或者灰色区域（我将其涂成灰色只是为了给人一种尚未填充的印象）气体边缘也是圆形的。

谢谢