如何在开始时显示一个空白图表并在单击按钮时填充值 [英] How to show an empty chart in beginning and populate values on button click

问题描述

我从这篇帖子中获得了代码.我想单击按钮而不是对其进行初始化来填充图表，并且仅提供3个值，例如 22286,12286,9286 (这些值将是动态的)，并以相同的外观绘制图表(即截至摘要为止的3种颜色图表

I have code from this post. I want to populate the chart on click of a button instead of initializing it and provide only 3 values e.g.22286,12286,9286 ( these values would be dynamic) and plot the chart with the same appearance (i.e. 3 colors chart) as of the snippet

Highcharts.chart('container', {

  colors: ['#762232', '#EFCA32', '#007788'],
  title: {
    text: '',
  },
  chart: {
    type: 'area',
    backgroundColor: null,
    // spacingRight: 5,
    spacingTop: 5,
    spacingBottom: 5,
    style: {
      fontFamily: 'Arial, sans-serif',
    },
    plotBorderWidth: 1,
    plotBorderColor: '#ccc',
  },

  xAxis: {
    gridZIndex: 4,
    gridLineWidth: 1,
    tickInterval: 1,
    tickWidth: 0,
    alignTicks: true,
    gridLineColor: '#762232',
    minPadding: 0,
    maxPadding: 0,
    title: {
      text: 'Years Invested',
    },
    labels: {
      enabled: true,
    },
  },

  yAxis: {
    gridLineWidth: 0,
    opposite: true,
    title: {
      text: 'Hypothetical Value',
    },
    showFirstLabel: false,
    showLastLabel: false,
    tickPositioner: function() {
      var prevTickPos = this.tickPositions,
        tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
        series = this.chart.series;

      series.forEach(function(s) {
        tickPositions.push(s.processedYData[s.processedYData.length - 1]);
      });

      tickPositions.sort(function(a, b) {
        return a - b;
      });

      return tickPositions;
    },
    labels: {
      enabled: true,
      align: "right",
      reserveSpace: true,
    },
  },
  tooltip: {
    enabled: !1,
  },
  plotOptions: {
    area: {
      pointStart: 0,
      stacking: false,
      lineColor: '#762232',
      lineWidth: 1,
      fillOpacity: 1,
      dataLabels: {
        crop: !1,
        color: '#762232',
        align: 'right',
        y: 5,
      },
      marker: {
        enabled: !1,
        symbol: 'circle',
        radius: 1,
        states: {
          hover: {
            enabled: !1,
          },
        },
      },
    },
  },

  series: [{
    data: [4457, 13371, 22286]
  }, {
    data: [2457, 9371, 12286]
  }, {
    data: [1457, 5371, 9286]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>

</figure>

<button>Populate Chart</button>

推荐答案

您要做的就是创建带有空数据数组的序列，并使用 chart.update 方法添加数据.示例:

All you need to do is to create series with empty data array and use chart.update method to add data. Example:

var chart = Highcharts.chart('container', {
    ...,
    series: [{
        data: []
    }, {
        data: []
    }, {
        data: []
    }]
});

document.getElementById('chartInit').addEventListener('click', function(){
    chart.update({
        series: [{
            data: [4457, 13371, 22286]
        }, {
            data: [2457, 9371, 12286]
        }, {
            data: [1457, 5371, 9286]
        }]
    });
});

---

实时演示: https://jsfiddle.net/BlackLabel/8pL6hr3w/

API参考: https://api.highcharts.com/class-reference/Highcharts.Chart#update

这篇关于如何在开始时显示一个空白图表并在单击按钮时填充值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！