chartjs 混合类型显示想要为某些栏设置显示 none

Question

您好，我正在尝试创建一个类似于我的屏幕截图的图表。

为此，我尝试使用以下代码。这里有两个额外的栏显示。我想隐藏图表 (label:false) 中的那些条形图。有什么办法可以做到吗？请推荐

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  </head>

  <body>
        <canvas id="canvas"></canvas>
    <script>
      var barChartData = {
    labels: ['6/30', '7/31', '8/31'],
    datasets: [
    {
            label: false,
            data: [0, 10, 20, 30, 40, 50, 60, 70, 80],
            fill: false,
            borderColor: '#EC932F',
            backgroundColor: '#EC932F',
            pointBorderColor: '#EC932F',
            pointBackgroundColor: '#EC932F',
            pointHoverBackgroundColor: '#EC932F',
            pointHoverBorderColor: '#EC932F',
            yAxisID: 'y-axis-2'
    },
    {
        type: 'line',
        label: 'line',
        borderColor:'red',
        borderWidth: 2,
        fill: false,
        data: [73.6, 72.0, 71.0],
        yAxisID: 'y-axis-2'
    },
    {
        type: 'bar',
        label: 'Dataset 2',
        backgroundColor:'blue',
        data: [1328, 1380, 1380],
        borderColor: 'white',
        borderWidth: 2
    }, {
        type: 'bar',
        label: 'Dataset 3',
        backgroundColor: 'yellow',
        data: [978, 993, 980],
    },
    {
            label: false,
            data: [0,500,1000,1500,2000,2500,3000],
            fill: false,
            yAxisID: 'y-axis-1'
    },
    ]

};
        
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Chart.js Combo Bar Line Chart'
            },
            tooltips: {
                mode: 'label',
                intersect: true
            },
            elements: {
                line: {
                    fill: false,
                },
            },
            scales: {
                        xAxes: [{
                            display: true,
                            gridLines: {
                                display: false
                            },
                            labels: {
                                show: true,
                            }
                        }],
                        yAxes: [
                            {
                                type: "linear",
                                display: true,
                                position: "left",
                                id: "y-axis-1",
                                gridLines:{
                                    display: false
                                },
                                labels: {
                                show:true,
                                
                                }
                            }, 
                            {
                                type: "linear",
                                display: true,
                                position: "right",
                                id: "y-axis-2",
                                gridLines:{
                                    display: false
                                },
                                labels: {
                                    show:true,
                                    
                                }
                            }
                        ]
                    }
        }
    });
};
    </script>
  </body>

</html>

Answer 1

图表需要显示的数据，而不是 hide/display 逻辑。

可以手动过滤；

    let myset = barChartData.datasets
    barChartData.datasets = []
    for(i = 0;i< myset.length; i++){
        if(myset[i].label){
            barChartData.datasets.push(myset[i])
        }
    }

Answer 2

有一个插件完全符合您的柱形值所需的功能，chartjs-plugin-datalabels (Github)。

对于您在右侧 y 轴上的百分比，还有许多其他答案。我推荐 this one.

Answer 3

我解决了。这里使用了 animation: 选项来设置栏顶部的数据值。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    var barChartData = {
      labels: ['6/30', '7/31', '8/31'],
      datasets: [{
          type: 'line',
          label: 'line',
          borderColor: 'red',
          borderWidth: 2,
          fill: false,
          data: [73.6, 72.0, 71.0],
          yAxisID: 'y-axis-2'
        },
        {
          type: 'bar',
          label: 'Dataset 2',
          backgroundColor: 'blue',
          data: [1328, 1380, 1380],
          borderColor: 'white',
          borderWidth: 2
        }, {
          type: 'bar',
          label: 'Dataset 3',
          backgroundColor: 'yellow',
          data: [978, 993, 980],
        },
      ]

    };

    window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');

      window.myBar = new Chart(ctx, {
        type: 'bar',

        data: barChartData,
        options: {
          responsive: true,
          title: {
            display: true,
            text: 'Chart.js Combo Bar Line Chart'
          },
          tooltips: {
            mode: 'label',
            intersect: true,
            enabled: false
          },
          scales: {
            xAxes: [{
              display: true,
              gridLines: {
                display: false
              },
              labels: {
                show: true,
              }
            }],
            yAxes: [{
                type: "linear",
                display: true,
                position: "left",
                id: "y-axis-1",
                gridLines: {
                  display: false
                },
                labels: {
                  show: true,

                },
                ticks: {
                  beginAtZero: true,
                  stepSize: 500,
                  suggestedMax: 3000
                },
              },
              {
                type: "linear",
                display: true,
                position: "right",
                id: "y-axis-2",
                gridLines: {
                  display: false
                },
                labels: {
                  show: true,

                },
                ticks: {
                  stepSize: 10,
                  min: 0,
                  max: 100, // Your absolute max value
                  callback: function(value) {
                    return (value / 100 * 100).toFixed(0) + '%'; // convert it to percentage
                  },
                },
                scaleLabel: {
                  display: true,
                  labelString: 'Percentage',
                },

              }
            ]
          },
          hover: {
            animationDuration: 0
          },
          animation: {
            duration: 1,
            onComplete: function() {
              var chartInstance = this.chart,
                ctx = chartInstance.ctx;
              ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
              ctx.textAlign = 'center';
              ctx.textBaseline = 'bottom';
              ctx.fillStyle = "#666";
              //ctx.fillStyle = dataset.type == "line" ? "blue" : "black";

              this.data.datasets.forEach(function(dataset, i) {
                ctx.fillStyle = dataset.type == "line" ? "blue" : "black";

                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                  var data = dataset.data[index];
                  if (dataset.type == "line") {
                    data = data + '%';
                  }


                  ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
              });
            }
          },
        },
      });
    };
  </script>
</body>

</html>

chartjs 混合类型显示想要为某些栏设置显示 none

chartjs mixed type display want to set display none for some bar

javascript

jquery

linechart

bar-chart

chart.js