如何在组合堆叠条形图上设置pointDot选项

How to set the pointDot option on combo stacked bar-line chart

本文关键字:设置 pointDot 选项 条形图 组合      更新时间:2024-06-03

我正在尝试实现一个既有堆叠条形图又有多个折线图的图表。我一辈子都想不出如何隐藏折线图上的点。我试过在Chart.defaults、数据集和选项中设置它,但没有成功。我认为这与这样一个事实有关,即为了制作组合条形图/折线图,您将图表定义为类型条形图,这使得pointDot参数没有意义。有什么想法吗?

var ytdData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
      {
        type: 'bar',
        label: 'Sales',
        backgroundColor: 'green',
        data: sales,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Additional URL',
        backgroundColor: 'red',
        data: addtlUrl,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Recurring Services',
        backgroundColor: 'orange',
        data: addtlSvcs,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Install Base',
        backgroundColor: 'blue',
        data: installBase,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Double Comp',
        backgroundColor: 'purple',
        data: doubleComp,
        borderColor: 'white'
      },
      {
        type: 'line',
        label: 'Quota',
        fill: false,
        data: baseQuota,
        borderColor: '#C1C1C1',
        strokeColor: "rgba(151,187,205,0)",
        pointColor: "rgba(0,0,0,0)"
      },
      {
        type: 'line',
        label: 'Minimum MRR',
        fill: false,
        borderDash: [5, 5],
        data: [42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000]
      }
    ]
  };
  Chart.defaults.line.pointDot = false;
  var stackedChart = new Chart($("#ytdChart").get(0).getContext("2d"), {
    type: 'bar',
    data: ytdData,
    options: {
      legend: {
        position: 'bottom'
      },
      tooltips: {
        mode: 'label'
      },
      responsive: true,
      scales: {
        xAxes: [{
          stacked: true,
          ticks: {
            beginAtZero: true
          }
        }],
        yAxes: [{
          stacked: false,
          ticks: {
            suggestedMax: 5,
            beginAtZero: true,
            callback: function(value) {
              return Number(value).toFixed(0);
            }
          }
        }]
      }
    }
  });

只需将行数据集的pointRadius设置为0,就像一样

{
    type: 'line',
    pointRadius: 0,
    ...

Fiddle-http://jsfiddle.net/w99o1eub/