应用过滤器后更新折线图（高级图表）

Question

我有一个带有双Y轴的组合图。我有一个提交按钮，单击该按钮应可更新线形图。折线图中的当前数据为[42.857142857142854,36.36363636363637,50,100,37.5,66.66666666666666,66.66666666666666,50,50,21.428571428571427,23.076923076923077,33.33333333333333,75,100,100,50,100,50]

当我单击最底部的Submit按钮时，它应该更新此数据，以便使用新值更新线形图（JSFiddle上的橙色）。我使用以下代码进行了更新，但折线图未正确更新

function update(){
var seriesChart = chart.series[0];
seriesChart.update({
data:percentageDataUpdate}); 
}  

有人可以建议我如何解决这个问题。

JSFiddle链接：https://jsfiddle.net/q6ybvpgt/1/

Answer 1

您可以使用Series.setData API for Series图表，将Series.setData选项设置为updatePoints即可完成工作：

false

在

function update() {
  chart.series[0].setData(percentageDataUpdate, true, true, false);
}

下：

请注意，Series.update可能会改变传递的数据选项。

以及您获得的Series.update：

Highcharts希望对数据进行排序

这种情况发生在创建折线系列或股票图表时，数据未按X升序排列订单。

出于性能原因，Highcharts不会对数据进行排序，而是对数据进行排序要求实施者对数据进行预排序。

Series.update

error

var percentageDataUpdate = [7.142857142857142, 9.090909090909092, 0, 0, 12.5, 33.33333333333333, 33.33333333333333, 50, 0, 7.142857142857142, 7.6923076923076925, 0, 50, 0, 0, 0, 50, 0];

var barData = [{ "name": "A", "y": 56 }, { "name": "B", "y": 44 }, { "name": "C", "y": 8 }, { "name": "D", "y": 8 }, { "name": "E", "y": 32 }, { "name": "F", "y": 12 }, { "name": "G", "y": 12 }, { "name": "H", "y": 8 }, { "name": "I", "y": 8 }, { "name": "J", "y": 56 }, { "name": "K", "y": 52 }, { "name": "L", "y": 12 }, { "name": "M", "y": 16 }, { "name": "N", "y": 8 }, { "name": "O", "y": 8 }, { "name": "P", "y": 8 }, { "name": "Q", "y": 8 }, { "name": "R", "y": 8 } ]


var yAxis = [

  { // Secondary yAxis
    title: {
      text: 'Error Percentage',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    max: 100,
    startOnTick: false,
    endOnTick: false,
    opposite: true

  },
  { // Primary yAxis

    title: {
      text: ' Average Count',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} ',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    }
  }
];



var chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },

  title: {
    text: 'Error Distribution (Days)'
  },
  xAxis: {
    title: {
      text: 'Value Type'
    },

    type: 'category',
    crosshair: true
  },

  yAxis: yAxis,




  series: [{
      name: 'Percentage',
      type: 'line',
      data: [42.857142857142854, 36.36363636363637, 50, 100, 37.5, 66.66666666666666, 66.66666666666666, 50, 50, 21.428571428571427, 23.076923076923077, 33.33333333333333, 75, 100, 100, 50, 100, 50],
      color: "#FFA500"
    },
    {
      name: "Count Distribution by Types",
      type: 'column',
      yAxis: 1,
      data: barData,
      color: "#7cb5ec"
    },
  ]
});

function update() {
  chart.series[0].setData(percentageDataUpdate, true, true, false);
}

hack：如果您确实需要使用更新，请执行两次：

.highcharts-figure,
.highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

#container {
  height: 400px;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.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>
  <input type="button" onClick="update()" value="Submit" />
</figure>

function update() {
  chart.series[0].update({ data: [] });
  chart.series[0].update({ data: percentageDataUpdate });
}

var percentageDataUpdate = [7.142857142857142, 9.090909090909092, 0, 0, 12.5, 33.33333333333333, 33.33333333333333, 50, 0, 7.142857142857142, 7.6923076923076925, 0, 50, 0, 0, 0, 50, 0];

var barData = [{ "name": "A", "y": 56 }, { "name": "B", "y": 44 }, { "name": "C", "y": 8 }, { "name": "D", "y": 8 }, { "name": "E", "y": 32 }, { "name": "F", "y": 12 }, { "name": "G", "y": 12 }, { "name": "H", "y": 8 }, { "name": "I", "y": 8 }, { "name": "J", "y": 56 }, { "name": "K", "y": 52 }, { "name": "L", "y": 12 }, { "name": "M", "y": 16 }, { "name": "N", "y": 8 }, { "name": "O", "y": 8 }, { "name": "P", "y": 8 }, { "name": "Q", "y": 8 }, { "name": "R", "y": 8 } ]


var yAxis = [

  { // Secondary yAxis
    title: {
      text: 'Error Percentage',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    max: 100,
    startOnTick: false,
    endOnTick: false,
    opposite: true

  },
  { // Primary yAxis

    title: {
      text: ' Average Count',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} ',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    }
  }
];



var chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },

  title: {
    text: 'Error Distribution (Days)'
  },
  xAxis: {
    title: {
      text: 'Value Type'
    },

    type: 'category',
    crosshair: true
  },

  yAxis: yAxis,




  series: [{
      name: 'Percentage',
      type: 'line',
      data: [42.857142857142854, 36.36363636363637, 50, 100, 37.5, 66.66666666666666, 66.66666666666666, 50, 50, 21.428571428571427, 23.076923076923077, 33.33333333333333, 75, 100, 100, 50, 100, 50],
      color: "#FFA500"
    },
    {
      name: "Count Distribution by Types",
      type: 'column',
      yAxis: 1,
      data: barData,
      color: "#7cb5ec"
    },
  ]
});

function update() {
  chart.series[0].update({ data: [] });
  chart.series[0].update({ data: percentageDataUpdate });
}